Intl 物件是 ECMAScript 國際化 API 的一個命名空間,它提供精確的字串對比、數字格式化與日期時間格式化。
原來JS內建這麼好用的東西,會對翻譯、排序與時間等格式化有很便捷的使用,如果使用得當,覺得會是對程式與專案上有更好的優化。
Intl.Collator 字串比對與排序
//比較
const c = new Intl.Collator( 'en' ); //'zh' 可替換成別的語系 如:en、de 等
console.log( c.compare( "好", "好" ) ); // 回傳0 表示兩者相同
console.log( c.compare( "n好", "好" ) ); // 回傳-1 表示不同
console.log( c.compare( "好s", "好" ) ); // 回傳1 表示不同
//排序
const list = [ '5', '1', '12', '4' ]
const c = new Intl.Collator( "en", { numeric: true } );
console.log( list.sort( c.compare ) );
- numeric : 是否按照數值比較排序
Intl.ListFormat 陣列格式化
const arr = [ 'Mary', 'Ban', 'Tom', 'Mom' ];
const list = new Intl.ListFormat( 'zh-TW', {
style: 'long',
type: 'conjunction' } );
console.log( list.format( arr ) ); //Mary, Ban, Tom, 和 Mom
Intl.NumberFormat 數字格式化
const num = 12345;
//僅需百位符號
const n1 = new Intl.NumberFormat( 'zh-TW');
console.log( n1.format( num ) ); // 12,345
//貨幣的文字
const n2 = new Intl.NumberFormat( 'zh-TW', {
style: 'currency',
currency: 'NTD',
maximumFractionDigits: 0,
} );
console.log( n2.format( num ) ); // NTD 12,345
//單位
const n3 = new Intl.NumberFormat( 'zh-TW', {
style: 'unit',
unit: 'kilometer',
unitDisplay: 'short',
} );
console.log( n3.format( num ) ); // 12,345 公里
//符號更換
const n3 = new Intl.NumberFormat( 'zh-TW', {
notation: 'compact'
} );
console.log( n3.format( num ) ); // 1.2萬
- 語言環境
- zh-Hans-CN-u-nu-hanidec : 中文文字的轉換
- ar-EG : 阿拉伯數字的轉換
- …
- useGrouping百分位符號,預設:true。
- style
- currency : 貨幣,需搭配 currency
- unit : 單位,需搭配 unit
- currency
- NTD : 台幣
- JPY : 日幣
- USD : 美金
- …只要是貨幣簡寫都行
- currencyDisplay ,可搭配currency
- symbol : 符號 (default)
- code : ISO貨幣代碼
- name : 文字轉換
- unit ,可搭配unitDisplay
- kilometer : 公里
- centimeter :公分
- liter : 升
- kilometer-per-hour : 一小時幾公里
- unitDisplay,沒有使用,unit預設為short
- long : 全稱
- short : 簡寫
- narrow : 簡寫,去掉與數字間的空格
- maximumFractionDigits最大小數點數,判斷的值為1到21,默認值為1。
- maximumSignificantDigits比如殺價時,都會問問老闆能不能去掉尾數;有效值為1到15,默認值為15。
- minimumIntegerDigits補零。
- notation
- standard : 百位符號(預設)
- compact : 簡寫符號
- engineering : 工程符號
- scientific : 科學符號
Intl.DateTimeFormat 日期時間格式化
const today = new Date();
const b1 = new Intl.DateTimeFormat( 'zh-TW', {
dateStyle: 'full',
timeStyle: 'short'
} );
console.log( b1.format( today ) );
const b = new Intl.DateTimeFormat( 'zh-TW', {
dayPeriod: 'short'
} );
console.log( b.format( today ) );
- dateStyle
- full
- long
- medium
- short (default)
- timeStyle
- full
- long
- medium
- short
- dayPeriod (不可與timeStyle、dateStyle搭配使用)
- long
- narrow
- short
Intl.RelativeTimeFormat 相對時間格式化
const today = new Date();
const f = new Intl.RelativeTimeFormat( 'en', {
style: 'short',
numeric: 'auto',
} );
console.log( f.format( 0, 'days' ) );
Intl.DisplayNames
const d = new Intl.DisplayNames( 'zh-TW', {
type: 'language',
style: short', // default 'long'
} );
// console.log( d.of( 'Hant' ) );
- 語言環境
- zh-Hant : 繁體
- zh-TW
- …
- type
- language : 語言名稱
- region : 地區名稱
- script : : script 名稱
- currency : 幣別名稱
- calendar : 日曆(找不到對應參數)
- dateTimeField : 日期時間名稱
- style (外國語系比較有感)
- long (default)
- narrow
- short
注意
Intl的函數有些參數目前只有瀏覽器有實作,在 server 使用是須留意相容性或需透過 Babel 處理,相關的相容性在MDN都可以找到參考。
參考
Intl-MDN
Intl.RelativeTimeFormat Is A Game Changer In JavaScript
How To Easily Format Currencies In JavaScript
How To Easily Format Dates In JavaScript
[WebAPIs] Intl API