FE.ES-瞭解JS數據國際化

1. 相對時間國際化

支持 "second", "minute", "hour", "day", "week", "month", "quarter", "year"

var rtf = new Intl.RelativeTimeFormat('zh-Hans-CN',{numeric: "auto"});

rtf.format(-1, "day");
//"昨天"

rtf.format(-2, "day");
//"前天"

var rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
rtf.format(-1, "day");
// "yesterday"
rtf.format(1, "day");
//"tomorrow"

2. 數字國際化

2.1 分組逗號分隔

(1234.2345).toLocaleString('en-US',{useGrouping:true});
//"1,234.235"

2.2 科學計數保留位

(1234.2345).toLocaleString('zh-CN', {style:'decimal',maximumSignificantDigits:2});
//"1,200"

// 德語使用逗號做爲小數點,使用.做爲千位分隔符
new Intl.NumberFormat('de-DE').format(number)
// → 123.456,789

(1234567890).toLocaleString('zh-Hans-CN-u-nu-hanidec',{useGrouping:false})
//"一二三四五六七八九〇"
(123456.0199).toLocaleString('zh-Hans-CN-u-nu-hanidec')
//"一二三,四五六.〇二"

2.3 小數保留位

(1234.2345).toLocaleString('zh-CN', { style: 'decimal',maximumFractionDigits:3});
//"1,234.235"

2.4 百分制

(1234.2345).toLocaleString('zh-CN', { style: 'percent',maximumFractionDigits:2});
//"123,423.45%"

2.5 貨幣

(1234.23).toLocaleString('zh-CN', { style: 'currency',currency:"CNY",
                                    currencyDisplay:"symbol",
                                    maximumFractionDigits:2});
//"￥1,234.23"
(1234.23).toLocaleString('zh-CN', { style: 'currency',currency:"CNY",
                                    currencyDisplay:"code",
                                    maximumFractionDigits:2});
//"CNY 1,234.23"
(1234.23).toLocaleString('zh-CN', { style: 'currency',currency:"CNY",
                                    currencyDisplay:"name",
                                    maximumFractionDigits:2});
//"1,234.23 人民幣"

var number = 123456.789;

// 請求一個貨幣格式
console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
// → 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));
// → ￥123,457

// 只顯示三個有效數字
console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));
// → 1,23,000

3 日期時間國際化

var date=new Date(Date.UTC(2012, 11, 20, 3, 0, 0))
Intl.DateTimeFormat('en-US').format(date)//"12/20/2012"
Intl.DateTimeFormat('en-GB').format(date)//"20/12/2012"
Intl.DateTimeFormat('ko-KR').format(date)//"2012. 12. 19."
Intl.DateTimeFormat('ar-EG').format(date)//"١٩‏/١٢‏/٢٠١٢"

3.1 時間國際化

date.toLocaleTimeString('zh-Hans-CN')
//"上午11:00:00"

3.2 日期國際化

date.toLocaleDateString('zh-Hans-CN')
"2012/12/20"

星期文案轉換

(new Date('2001-01-01')).toLocaleString('zh-Hans-CN',{weekday:"long"})
//"星期一"
(new Date('2001-01-07')).toLocaleString('zh-Hans-CN',{weekday:"short"})
//"週日"

Date.prototype.toLocaleString 配置項

date.toLocaleString('zh-Hans-CN',{
                            year:"numeric",
                            month:"2-digit",
                            day:"2-digit",
                            weekday:"long",
                            hour:"2-digit",
                            minute:"2-digit",
                            second:"2-digit",
                            hour12: false,
                            timeZone:"Asia/Shanghai",
                        })
//"2012年12月20日星期四 11:00:00"

Intl格式化（含時區轉換）

Intl.DateTimeFormat('zh-Hans-CN',{
                            year:"numeric",
                            month:"2-digit",
                            day:"2-digit",
                            hour:"2-digit",
                            minute:"2-digit",
                            second:"2-digit",
                            hour12: false,
                            timeZone:"Asia/Shanghai"
                        }).format(date);
//"2012/12/20 11:00:00"

Intl格式化分片

Intl.DateTimeFormat('zh-Hans-CN',{
                            year:"numeric",
                            month:"2-digit",
                            day:"2-digit",
                            hour:"2-digit",
                            minute:"2-digit",
                            second:"2-digit",
                            hour12: false,
                            timeZone:"Asia/Shanghai",
                        }).formatToParts(date)
/*
0: {type: "year", value: "2012"}
1: {type: "literal", value: "/"}
2: {type: "month", value: "12"}
3: {type: "literal", value: "/"}
4: {type: "day", value: "12"}
5: {type: "literal", value: " "}
6: {type: "hour", value: "11"}
7: {type: "literal", value: ":"}
8: {type: "minute", value: "00"}
9: {type: "literal", value: ":"}
10: {type: "second", value: "00"}
*/

農曆陽曆轉換

Intl.DateTimeFormat('zh-Hans-CN-u-ca-chinese').format(date);
//"29/11/8"
//備註：農曆壬辰年 十一月初八

zhMon=[' 甲乙丙丁戊己庚辛壬癸',' 子醜寅卯辰巳午未申酉戌亥']
zhMon[0][29%10]+zhMon[1][29%12]//壬辰

date.toLocaleString('zh-Hans-CN-u-ca-chinese')
//"29/11/8 上午11:00:00"

4. 敏感字符比較

Intl.Collator

// 德語中, ä 使用 a 做爲基本字母
new Intl.Collator('de', { sensitivity: 'base' }).compare('ä', 'a')
// → 0

5. 集合描述國際化

Intl.ListFormat

const formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
formatter.format(vehicles)
// expected output: "Motorcycle, Bus, and Car"

const formatter2 = new Intl.ListFormat('de', { style: 'short', type: 'disjunction' });
formatter2.format(vehicles)
// expected output: "Motorcycle, Bus oder Car"

const formatter3 = new Intl.ListFormat('en', { style: 'narrow', type: 'unit' });
formatter3.format(vehicles)
// expected output: "Motorcycle Bus Car"

6. 複數描述國際化

Intl.PluralRules

var pr=new Intl.PluralRules('ar-EG')
pr.select(0);
// → 'zero'
pr.select(1); 
// → 'one'
pr.select(2);
// → 'two'
pr.select(6);
// → 'few'
pr.select(18);
// → 'many'

var pr = new Intl.PluralRules('en-US', { type: 'ordinal' });

pr.select(0);
// → 'other'
pr.select(1);
// → 'one'
pr.select(2);
// → 'two'
pr.select(3);
// → 'few'
pr.select(4);
// → 'other'
pr.select(42);
// → 'two'