Các API JavaScript mà bạn chưa biết

[theanh]

Vài ngày trước, tôi đã xem lại Khảo sát tình hình JS năm 2021 tuyệt vời. Tình hình JS là một cuộc khảo sát trực tuyến thu thập dữ liệu từ các nhà phát triển trên toàn thế giới để xem các xu hướng mới nhất và sắp tới trong cộng đồng JavaScript. Trong số dữ liệu mà nó thu thập, có một phần dành riêng cho các tính năng gốc mà JavaScript cung cấp, được liệt kê theo mức sử dụng và mức độ nhận biết của chúng. Như bạn có thể tưởng tượng, trong số các tính năng được sử dụng nhiều nhất có những tính năng phổ biến như Chuỗi tùy chọn, Hợp nhất Nullish, Websockets, v.v.

Tuy nhiên, tôi không quan tâm đến các API được sử dụng nhiều nhất hoặc được biết đến nhiều nhất. Thay vào đó, tôi đang tìm kiếm những API ít được biết đến nhất. Tôi muốn biết chúng ta chưa nói đủ về những API nào và trong số đó, tôi đã tìm thấy bốn API khá khác nhau nhưng cực kỳ hữu ích:

• API Hiển thị Trang
• API Chia sẻ Web
• API Kênh Phát sóng
• API Quốc tế hóa

Trong bài viết này, chúng ta sẽ xem chúng là gì, chúng ta nên sử dụng chúng ở đâu và cách sử dụng chúng.

Lưu ý: Tất cả các API này đều có trong bản demo này.

API Hiển thị Trang​

Đây là một API web ít được biết đến, xếp hạng thứ tư về mức độ nhận biết trong Khảo sát tình trạng JS. Nó cho bạn biết khi nào người dùng rời khỏi trang. Nói một cách chính xác, API kích hoạt một sự kiện bất cứ khi nào trạng thái hiển thị của trang thay đổi, khi người dùng thu nhỏ hoặc phóng to cửa sổ hoặc chuyển tab.

Trước đây, bạn phải sử dụng các mánh lới để biết liệu người dùng đã chuyển tab hay thu nhỏ cửa sổ hay chưa. Phổ biến nhất là sử dụng các sự kiện trình duyệt blur và focus. Sử dụng các sự kiện này sẽ cho kết quả như sau:

window.addEventListener("focus", function () { // Người dùng quay lại trang // Làm gì đó});window.addEventListener("blur", function () { // Người dùng rời khỏi trang // Làm gì đó});

Mã trước đó hoạt động nhưng không như mong đợi. Vì sự kiện blur được kích hoạt khi trang mất tiêu điểm, nên sự kiện này có thể được kích hoạt khi người dùng nhấp vào thanh tìm kiếm, hộp thoại cảnh báo, bảng điều khiển hoặc đường viền cửa sổ. Vì vậy, blur và focus chỉ cho chúng ta biết trang có đang hoạt động hay không nhưng không cho biết nội dung của trang bị ẩn hay hiển thị.

Các trường hợp sử dụng​

Nhìn chung, chúng ta muốn sử dụng API Hiển thị trang để dừng các quy trình không cần thiết khi người dùng không nhìn thấy trang hoặc ngược lại, để thực hiện các hành động nền. Một số trường hợp cụ thể có thể là:

• để tạm dừng video, băng chuyền hình ảnh hoặc hoạt ảnh khi người dùng rời khỏi trang;
• nếu trang hiển thị dữ liệu trực tiếp từ API, hãy tạm thời dừng hành vi này khi người dùng không ở đó;
• để gửi phân tích người dùng.

Cách sử dụng?​

API Hiển thị trang mang đến hai thuộc tính và một sự kiện để truy cập trạng thái hiển thị của trang:

• document.hidden
  API này khả dụng trên toàn cầu và chỉ có thể đọc. Cố gắng tránh nó vì hiện tại nó đã lỗi thời, nhưng khi được truy cập, nó trả về true nếu trang bị ẩn và false nếu trang hiển thị.
• document.visibilityState
  Đây là phiên bản cập nhật của document.hidden, nhưng khi được truy cập, nó trả về bốn giá trị có thể tùy thuộc vào trạng thái hiển thị của trang: - visible
  Trang hiển thị, hay chính xác hơn là không bị thu nhỏ hoặc không ở trong tab khác. - hidden
  Trang không hiển thị; nó được thu nhỏ hoặc ở trong tab khác. - prerender
  Đây là trạng thái ban đầu của trang hiển thị khi trang đó đang được hiển thị trước. Trạng thái hiển thị của trang có thể bắt đầu ở prerender rồi chuyển sang trạng thái khác, nhưng không thể chuyển từ trạng thái khác sang prerender. - unloaded
  Trang đang được dỡ khỏi bộ nhớ.
• visibilitychange
  Đây là sự kiện do đối tượng document cung cấp và được kích hoạt khi visibilityState của trang thay đổi.

document.addEventListener("visibilitychange", () => { if (document.visibilityState === "visible") { // page is visible } else { // page is hidden }});

Để xem cách sử dụng API Page Visibility, hãy sử dụng API này để tạm dừng video và dừng việc truy xuất tài nguyên từ API khi người dùng rời khỏi trang. Để bắt đầu, tôi sẽ sử dụng vite.js, đây là một công cụ tuyệt vời để bắt đầu một dự án mới một cách nhanh chóng:

npm create vite@latest unknown-web-apis

Khi được yêu cầu chọn một khuôn khổ, hãy chọn vanilla để tạo một dự án javascript vanilla. Sau khi hoàn tất, hãy vào thư mục mới, cài đặt các gói npm cần thiết và khởi động máy chủ dành cho nhà phát triển:

cd unknown-web-apis npm install npm run dev

Truy cập localhost:3000/ và bạn sẽ thấy dự án Vite của mình đang hoạt động!



Đầu tiên, chúng ta sẽ chuyển hướng đến tệp /main.js và xóa tất cả các đoạn mã mẫu. Thứ hai, chúng ta sẽ mở /index.html và bên trong thẻ div #app, chúng ta sẽ thêm một phần tử video với bất kỳ tệp video nào bạn muốn. Tôi đã sử dụng một Yoshi nhảy múa.

Quay lại /main.js, chúng ta sẽ thêm trình lắng nghe sự kiện vào đối tượng document để lắng nghe sự kiện visibilitychange. Sau đó, chúng ta có thể truy cập thuộc tính document.visibilityState để xem khi nào trang hiển thị hoặc ẩn.

document.addEventListener("visibilitychange", () => { console.log(document.visibilityState);});

Bạn có thể vào bảng điều khiển của trang và xem trạng thái hiển thị của trang thay đổi khi bạn thu nhỏ cửa sổ hoặc chuyển sang tab khác. Bây giờ, bên trong trình lắng nghe sự kiện, chúng ta có thể kiểm tra thuộc tính document.visibilityState, tạm dừng video khi video ẩn và phát khi video hiển thị. (Tất nhiên, trước tiên chúng ta chọn phần tử video bằng cách sử dụng document.querySelector().)

const video = document.querySelector("#video");document.addEventListener("visibilitychange", () => { if (document.visibilityState === "visible") { video.play(); } else { video.pause(); }});

Bây giờ video sẽ dừng lại bất cứ khi nào người dùng rời khỏi trang. Một công dụng khác của API Page Visibility là dừng việc tìm nạp các tài nguyên không cần thiết khi người dùng không nhìn thấy trang. Để thấy điều này, chúng ta sẽ viết một hàm để liên tục lấy một trích dẫn ngẫu nhiên từ API quotable.io và tạm dừng hành vi này khi trang bị ẩn. Trước tiên, chúng ta sẽ tạo một thẻ div mới để lưu trữ trích dẫn trong /index.html.

Quay lại /main.js, chúng ta sẽ sử dụng Fetch API để gọi đến điểm cuối quotable.io https://api.quotable.io/random rồi chèn vào div quote.

const quote = document.querySelector("#quote");const getQuote = async () => {try {const response = await fetch("https://api.quotable.io/random");const {content, author, dateAdded} = await response.json();const parsedQuote = ` ${content} 
 
- ${author}

 
Đã thêm vào ${dateAdded}
`;quote.innerHTML = parsedQuote;} catch (error) {console.error(error);}};getQuote();

Chúng ta hãy giải thích ngắn gọn những gì đang diễn ra ở đây. Đầu tiên, chúng ta chọn phần tử quote từ DOM. Sau đó, chúng ta khai báo hàm getQuote, đây là hàm async cho phép chúng ta sử dụng từ khóa await để đợi cho đến khi chúng ta lấy dữ liệu từ API. Dữ liệu được lấy ở định dạng JSON, vì vậy chúng ta sử dụng từ khóa await thêm một lần nữa để đợi cho đến khi dữ liệu được phân tích thành đối tượng JavaScript. API quotable.io cung cấp cho chúng ta—trong số những thứ khác—các thuộc tính content, author và dateAdded mà chúng ta sẽ đưa vào và hiển thị vào div quote. Điều này có hiệu quả, nhưng trích dẫn chỉ được lấy một lần, vì vậy chúng ta có thể sử dụng setInterval() để gọi hàm sau mỗi 10 giây.

const quote = document.querySelector("#quote");const getQuote = async () => {try {const response = await fetch("https://api.quotable.io/random");const {content, author, dateAdded} = await response.json();const parsedQuote = ` ${content} 
 
- ${author}

 
Đã thêm vào ${dateAdded}
`;quote.innerHTML = parsedQuote;} catch (error) {console.error(error);}};getQuote();setInterval(getQuote, 10000);

Nếu người dùng thu nhỏ cửa sổ hoặc chuyển tab, trang vẫn sẽ lấy trích dẫn, tạo ra tải mạng không cần thiết. Để giải quyết vấn đề này, chúng ta có thể kiểm tra xem trang có hiển thị hay không trước khi lấy trích dẫn.

const getQuote = async () => { if (document.visibilityState === "visible") { try { const response = await fetch("https://api.quotable.io/random"); const {content, author, dateAdded} = await response.json(); const parsedQuote = ` ${content} 
 
- ${author}

 
Đã thêm vào ${dateAdded}
`; quote.innerHTML = parsedQuote; } catch (lỗi) { console.error(lỗi); } }};getQuote();setInterval(getQuote, 10000);

Bây giờ, chúng ta sẽ chỉ lấy trích dẫn nếu trang hiển thị với người dùng.

Hỗ trợ​

Được hỗ trợ rộng rãi

API Chia sẻ Web​

Nó là gì?​

API Chia sẻ Web cũng nằm trong số các API ít được biết đến nhất nhưng lại cực kỳ hữu ích. Nó cho phép bạn truy cập vào cơ chế chia sẻ gốc của hệ điều hành, đặc biệt hữu ích với người dùng thiết bị di động. Với API này, bạn có thể chia sẻ văn bản, liên kết và tệp mà không cần phải tạo cơ chế chia sẻ của riêng mình hoặc sử dụng cơ chế của bên thứ ba.

Các trường hợp sử dụng​

Chúng khá dễ hiểu. Bạn có thể sử dụng nó để chia sẻ nội dung từ trang của bạn lên phương tiện truyền thông xã hội hoặc sao chép vào bảng tạm của người dùng.

Cách sử dụng nó?​

Web Share API cung cấp cho chúng ta hai giao diện để truy cập vào hệ thống chia sẻ của người dùng:

1. navigator.canShare()
   Chấp nhận dữ liệu bạn muốn chia sẻ dưới dạng đối số và trả về một đối số boolean tùy thuộc vào việc dữ liệu đó có thể chia sẻ được hay không.
2. 
   navigator.share()
   Trả về một lời hứa sẽ giải quyết nếu việc chia sẻ thành công. Nó gọi cơ chế chia sẻ gốc và chấp nhận dữ liệu bạn muốn chia sẻ dưới dạng đối số. Lưu ý rằng nó chỉ có thể được gọi nếu người dùng đã nhấn vào liên kết hoặc nút, tức là nó yêu cầu kích hoạt tạm thời. Dữ liệu chia sẻ là một đối tượng có thể có các thuộc tính sau:
   • url: URL cần chia sẻ,
   • text: văn bản cần chia sẻ,
   • title: tiêu đề cần chia sẻ,
   • files: mảng các đối tượng File biểu diễn các tệp cần chia sẻ.

Để xem cách sử dụng API này, chúng ta sẽ tái chế ví dụ trước và tạo tùy chọn chia sẻ trích dẫn của mình bằng API Chia sẻ Web. Để bắt đầu, trước tiên chúng ta phải tạo nút chia sẻ trong /index.html:

     Chia sẻ Trích dẫn

Chúng tôi chuyển hướng đến /main.js và chọn nút chia sẻ từ DOM. Sau đó, chúng tôi tạo một hàm async để chia sẻ dữ liệu chúng tôi muốn.

const shareButton = document.querySelector("#share-button");const shareQuote = async (shareData) => { try { await navigator.share(shareData); } catch (error) { console.error(error); }};

Bây giờ, chúng ta có thể thêm trình lắng nghe sự kiện nhấp vào phần tử shareButton để gọi lại hàm shareQuote. Giá trị shareData.text của chúng tôi sẽ là thuộc tính quote.textContent và shareData.url sẽ là URL của trang, tức là thuộc tính location.href.

const shareButton = document.querySelector("#share-button");const shareQuote = async (shareData) => { try { await navigator.share(shareData); } catch (error) { console.error(error); }};shareButton.addEventListener("click", () => { let shareData = { title: "A Beautiful Quote", text: quote.textContent, url: location.href, }; shareQuote(shareData);});

Bây giờ bạn có thể chia sẻ trích dẫn của mình với bất kỳ ai thông qua hệ điều hành gốc của bạn. Tuy nhiên, điều quan trọng cần lưu ý là Web Share API sẽ chỉ hoạt động nếu ngữ cảnh an toàn, tức là nếu trang được phục vụ qua URL https:// hoặc wss://.

Hỗ trợ​

Được hỗ trợ kém

Broadcast Channel API​

Nó là gì?​

Một API khác mà tôi muốn nói đến là Broadcast Channel API. Nó cho phép các ngữ cảnh duyệt gửi và nhận dữ liệu cơ bản từ nhau. Ngữ cảnh duyệt là các thành phần như tab, cửa sổ, iframe hoặc bất kỳ nơi nào có thể hiển thị trang. Vì lý do bảo mật, không được phép giao tiếp giữa các ngữ cảnh duyệt trừ khi chúng có cùng nguồn gốc và sử dụng Broadcast Channel API. Để hai ngữ cảnh duyệt có cùng nguồn gốc, chúng phải chia sẻ trong URL của chúng cùng một giao thức (ví dụ: http/https), tên miền (ví dụ: example.com) và cổng (ví dụ: :8080).

Các trường hợp sử dụng​

API Kênh phát sóng thường được sử dụng để giữ trạng thái của trang được đồng bộ hóa trên các tab và cửa sổ khác nhau nhằm nâng cao trải nghiệm của người dùng hoặc vì lý do bảo mật. API này cũng có thể được sử dụng để biết khi nào một dịch vụ hoàn tất trong một tab hoặc cửa sổ khác. Sau đây là một số ví dụ:

• Đăng nhập hoặc đăng xuất người dùng trên tất cả các tab.
• Phát hiện khi một tài sản được tải lên và hiển thị trên tất cả các trang.
• Hướng dẫn một nhân viên dịch vụ thực hiện một số công việc nền.

Cách sử dụng?​

API Kênh phát sóng bao gồm một đối tượng BroadcastChannel có thể được sử dụng để gửi tin nhắn đến các ngữ cảnh khác. Hàm tạo của nó chỉ có một đối số: một chuỗi sẽ hoạt động như một định danh để kết nối với kênh từ các ngữ cảnh khác.

const broadcast = new BroadcastChannel("new_channel");

Sau khi chúng ta tạo một đối tượng BroadcastChannel có cùng định danh trên hai ngữ cảnh, đối tượng BroadcastChannel mới sẽ có hai phương thức khả dụng để bắt đầu giao tiếp:

• BroadcastChannel.postMessage() để gửi tin nhắn trên tất cả các ngữ cảnh được kết nối. Nó lấy bất kỳ loại đối tượng nào làm đối số duy nhất để bạn có thể gửi nhiều loại dữ liệu khác nhau.

broadcast.postMessage("Example message");

• BroadcastChannel.close() để đóng kênh và báo cho trình duyệt biết rằng nó sẽ không nhận thêm bất kỳ tin nhắn nào nữa để có thể thu thập chúng vào thùng rác.

Để nhận tin nhắn, BroadcastChannel có sự kiện message mà chúng ta có thể lắng nghe bằng cách sử dụng addEventListener hoặc thuộc tính onmessage của nó. Sự kiện message có thuộc tính data với dữ liệu đã gửi và các thuộc tính khác để xác định ngữ cảnh đã gửi tin nhắn, chẳng hạn như origin, lastEventId, source và ports.

broadcast.onmessage = ({data, origin}) => { console.log(`${origin} says ${data}`);};

Chúng ta hãy xem cách sử dụng Broadcast Channel API bằng cách sử dụng ví dụ trước của chúng ta. Mục tiêu của chúng ta là tạo một ngữ cảnh duyệt khác có cùng nguồn gốc và hiển thị cùng một trích dẫn trong cả hai ngữ cảnh. Để thực hiện điều này, chúng ta sẽ tạo một thư mục mới có tên new-origin với các tệp /index.html và /main.js mới bên trong.

/new-origin/index.html sẽ là một HTML boilerplate mới với div #quote bên trong:

[*]   Ứng dụng Vite

Trong tệp /new-origin/main.js, chúng ta sẽ tạo một kênh phát sóng mới và chọn phần tử #quote từ DOM:

const broadcast = new BroadcastChannel("quote_channel");const quote = document.querySelector("#quote");

Và trong tệp /main.js trước đó, chúng ta sẽ tạo một đối tượng BroadcastChannel mới và kết nối đối tượng này với "quote_channel". Chúng ta cũng sẽ sửa đổi hàm getQuote để gửi trích dẫn dưới dạng tin nhắn đến các ngữ cảnh khác.

const broadcast = new BroadcastChannel("quote_channel");//...const getQuote = async () => {try {const response = await fetch("https://api.quotable.io/random");const {nội dung, tác giả, ngày thêm} = await response.json();const parsedQuote = ` ${nội dung} 
 
- ${author}

 
Đã thêm vào ${dateAdded}
`;quote.innerHTML = parsedQuote;broadcast.postMessage(parsedQuote);} catch (lỗi) {console.error(lỗi);}};

Quay lại tệp /new-origin/main.js, chúng ta sẽ lắng nghe sự kiện message và thay đổi quote.innerHTML mỗi khi có một trích dẫn mới được gửi.

const broadcast = new BroadcastChannel("quote_channel");const quote = document.querySelector("#quote");broadcast.onmessage = ({data}) => { quote.innerHTML = data;};

Bây giờ bạn có thể thấy trích dẫn trong http://localhost:3000/new-origin/ thay đổi như thế nào thành trích dẫn trong http://localhost:3000. Bạn cũng có thể nhận thấy cách trích dẫn không thay đổi khi tab http://localhost:3000 bị ẩn vì nó chỉ lấy trích dẫn khi trạng thái hiển thị trang của nó hiển thị.

Hỗ trợ​

Được hỗ trợ rộng rãi

API quốc tế hóa​

API quốc tế hóa là gì?​

Khi phát triển một trang web hoặc ứng dụng, việc cần dịch nội dung của nó sang các ngôn ngữ khác để tiếp cận được nhiều đối tượng hơn là vô cùng phổ biến. Tuy nhiên, chỉ dịch văn bản trên trang của bạn sang bất kỳ ngôn ngữ nào bạn cần là không đủ để cung cấp nội dung của bạn cho những người nói ngôn ngữ đó vì những thông tin như ngày tháng, số, đơn vị, v.v. sẽ khác nhau ở các quốc gia và có thể gây nhầm lẫn cho người dùng của bạn.

Giả sử bạn muốn hiển thị ngày "8 tháng 11 năm 2022" trên trang web của mình dưới dạng "11/8/22". Dữ liệu này có thể được đọc theo ba cách riêng biệt tùy thuộc vào quốc gia của người đọc:

• "Ngày 8 tháng 11 năm 2022" hoặc MM/DD/YY đối với những người ở Hoa Kỳ.
• "Ngày 11 tháng 8 năm 2022" hoặc DD/MM/YY đối với những người ở Châu Âu và Latam.
• "Ngày 22 tháng 8 năm 2011" hoặc YY/MM/DD đối với những người ở Nhật Bản, Trung Quốc và Canada.

Đây là nơi API quốc tế hóa (hay API I18n) xuất hiện để giải quyết các vấn đề định dạng trên nhiều ngôn ngữ và khu vực khác nhau. API I18n là một công cụ tuyệt vời có nhiều công dụng, nhưng chúng tôi sẽ không đi sâu vào chúng để không làm phức tạp thêm bài viết này.

Cách sử dụng?​

API I18n sử dụng các định danh ngôn ngữ để hoạt động. Mã định danh bản địa là một chuỗi thể hiện ngôn ngữ, quốc gia, khu vực, phương ngữ và các tùy chọn khác của người dùng. Nói một cách chính xác, mã định danh bản địa là một chuỗi bao gồm các thẻ phụ được phân tách bằng dấu gạch nối. Các thẻ phụ thể hiện các tùy chọn của người dùng như ngôn ngữ, quốc gia, khu vực hoặc chữ viết và được định dạng theo cách sau:

1. “zh”: Tiếng Trung (ngôn ngữ);
2. “zh-Hant”: Tiếng Trung (ngôn ngữ) được viết bằng chữ phồn thể (chữ viết);
3. “zh-Hant-TW”: Tiếng Trung (ngôn ngữ) được viết bằng chữ phồn thể (chữ viết) như được sử dụng ở Đài Loan (khu vực).

Có nhiều thẻ phụ hơn để giải quyết nhiều tùy chọn của người dùng hơn (nếu bạn muốn tìm hiểu thêm, bạn có thể kiểm tra định nghĩa RFC về thẻ ngôn ngữ), nhưng để ngắn gọn, API I18n sử dụng các mã định danh bản địa này để biết cách định dạng tất cả dữ liệu nhạy cảm với ngôn ngữ.

Nói chính xác hơn, API I18n cung cấp một đối tượng Intl mang đến một loạt các hàm tạo chuyên biệt để làm việc với dữ liệu nhạy cảm với ngôn ngữ. Theo tôi, một số hàm tạo Intl hữu ích nhất cho quốc tế hóa là:

• Intl.DateTimeFormat()
  Được sử dụng để định dạng ngày và giờ.
• Intl.DisplayNames()
  Được sử dụng để định dạng tên hiển thị ngôn ngữ, vùng và tập lệnh.
• Intl.Locale()
  Được sử dụng để xây dựng và thao tác các thẻ định danh bản địa.
• Intl.NumberFormat()
  Được sử dụng để định dạng số.
• Intl.RelativeTimeFormat()
  Được sử dụng để định dạng mô tả thời gian tương đối.

Đối với ví dụ của chúng tôi, chúng tôi sẽ tập trung vào hàm tạo Intl.DateTimeFormat() để định dạng thuộc tính dateAdded của trích dẫn tùy thuộc vào bản địa của người dùng. Hàm tạo Intl.DateTimeFormat() có hai đối số: chuỗi locale định nghĩa quy ước định dạng ngày tháng và các đối tượng options để tùy chỉnh cách định dạng ngày tháng.

Đối tượng Intl.DateTimeFormat() được tạo có phương thức format() có hai đối số: đối tượng Date mà chúng ta muốn định dạng và đối tượng options để tùy chỉnh cách hiển thị ngày đã định dạng.

const logDate = (locale) => { const newDate = new Date("2022-10-24"); // YY/MM/DD const dateTime = new Intl.DateTimeFormat(locale, {timeZone: "UTC"}); const formatedDate = dateTime.format(newDate); console.log(formatedDate);};logDate("en-US"); // 24/10/2022logDate("de-DE"); // 24.10.2022logDate("zh-TW"); // 24/10/2022

Lưu ý: Trên đối số options của hàm tạo Intl.DateTimeFormat, chúng ta đặt thuộc tính timeZone thành "UTC" để ngày không được định dạng theo giờ địa phương của người dùng. Trong trường hợp của tôi, ngày được phân tích thành "10/23/2022" mà không có tùy chọn timeZone.

Như bạn có thể thấy, dateTime.format() thay đổi ngày tùy thuộc vào quy ước định dạng ngày của ngôn ngữ. Chúng ta có thể triển khai hành vi này vào ngày trích dẫn bằng cách sử dụng thuộc tính toàn cục navigator.language, thuộc tính này chứa ngôn ngữ mà người dùng ưa thích. Để thực hiện điều này, chúng ta sẽ tạo một hàm mới lấy chuỗi ngày (theo định dạng YYYY-MM-DD) và trả về ngày được định dạng tùy thuộc vào ngôn ngữ của người dùng.

const formatDate = (dateString) => { const date = new Date(dateString); const locale = navigator.language; const dateTimeFormat = new Intl.DateTimeFormat(locale, {timeZone: "UTC"}); return dateTimeFormat.format(date);};

Chúng ta có thể thêm hàm này vào bên trong hàm getQuote() để phân tích cú pháp ngày dateAdded.

const getQuote = async () = > { if (document.visibilityState === "visible") { try { const response = await fetch("https://api.quotable.io/random"); const {content, author, dateAdded} = await response.json(); const parsedQuote = ` ${content} 
 
- ${author}

 
Added on ${formatDate(dateAdded)}
`; quote.innerHTML = parsedQuote; broadcast.postMessage(parsedQuote); } catch (error) { console.error(error); } }};

Với điều này, các trích dẫn của chúng tôi được bản địa hóa theo ngôn ngữ mà người dùng ưa thích! Trong trường hợp của tôi, giá trị navigator.language của tôi là "en", vì vậy ngày của tôi được định dạng thành MM/DD/YY.

Hỗ trợ​

Được hỗ trợ rộng rãi

Kết luận​

Sau khi đọc bài viết này, giờ đây bạn có thể thoải mái tìm hiểu về sự tồn tại của các API này và cách sử dụng chúng. Mặc dù chúng được xếp hạng cuối cùng về mức độ nhận thức trong Khảo sát về tình trạng JS, nhưng chúng cực kỳ hữu ích và việc biết cách sử dụng chúng chắc chắn sẽ nâng cao trải nghiệm phát triển của bạn. Thực tế là các API mạnh mẽ này không được biết đến nhiều có nghĩa là vẫn còn những API hữu ích mà bạn và tôi vẫn chưa biết đến, vì vậy đây là thời điểm hoàn hảo để khám phá và tìm API sẽ đơn giản hóa mã của bạn và giúp bạn tiết kiệm rất nhiều thời gian phát triển.

Tôi hy vọng bạn thích bài viết này và cho đến lần sau!