Share This Post

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 
  • style
    • long
    • narrow
    • short
  • type
    • conjunction : and 和
    • disjunction : or 或
    • unit : 間距空格

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' ) );
  • style
    • long
    • narrow
    • short
  • numeric
    • auto
    • always (default)

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
JS Intl对象完整简介及在中文中的应用

訂閱研究文章

Get updates and learn from the best

More To Explore

Scroll to Top

hurry up !

軟體工程師培訓

限時免費報名中

藉由與「真實世界軟體專案」相同的技術、工具與開發流程,化簡成與商業機密無關、門檻較低更容易上手的「模擬專案」,讓你有機會在職場前輩的陪伴下,完成真槍實彈的練習,動手解決真實的問題,快速累積個人的經驗與作品,而不只是「學習技術」而已。