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

Intl API

Monosparta Lab

Share This Post

Intl.Collator 字串比對與排序

Intl.ListFormat 陣列格式化

Intl.NumberFormat 數字格式化

Intl.DateTimeFormat 日期時間格式化

Intl.RelativeTimeFormat 相對時間格式化

Intl.DisplayNames

注意

參考