使用 js 中 的 Intl api

發表於 更新於 分類於
使用 intl api 調整資料格式

介紹

在 JS 中，如果我們需要調整不同語言間的資料格式，或將資料調整的更加容易閱讀，可以使用 Intl 這個 API。

DateTimeFormat 調整時間格式

1
2
const formatter = new Intl.DateTimeFormat('en-US');
console.log(formatter.format());  // 5/21/2023

要使用 Intl api ，要先 new 出一個實體，並調用裡面 DateTimeFormat 這個方法。
DateTimeFormat 方法裡可以傳入要格式化的地區，如上我傳入 en-US 地區。

如果不確定格式化的地區，可以傳入 undefined，程式會根據使用者上網的地區自行帶入時間格式。

1
2
3
4
5
6
7
8
9
let options = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
};

const formatter = new Intl.DateTimeFormat(undefined, options);
console.log(formatter.format()); // 2023年5月21日 星期日

在第二個參數可以傳入一個 options的 obj，用來指定格式是要用數字或是文字表達。

NumberFormat 調整數字格式

基礎用法可以將數字加上使用者地區的格式

1
2
3
4
const number = 3500;

console.log(new Intl.NumberFormat().format(number));
// '3,500' if in US English locale

NumberFormat 可以將數字加上幣值符號。

1
2
3
4
5
6
7
8
const number = 123456.789;

console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
// Expected output: "123.456,79 €"

// The Japanese yen doesn't use a minor unit
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number));
// Expected output: "￥123,457"

也可以加上不同的單位

1
2
3
4
5
6
7
8
// Formatting with units
console.log(
  new Intl.NumberFormat("pt-PT", {
    style: "unit",
    unit: "kilometer-per-hour",
  }).format(50),
);
// 50 km/h