初探 Intl.ListFormat.formatToParts()

前言

  在先前的 初探 Intl.ListFormat() 使用 Intl.ListFormat.format() 來輸出結果，Intl.ListFormat 還支援另一種輸出，也就是 Intl.ListFormat.formatToParts() ，在此把學習的過程做個紀錄。

內容

  範例如下

const itemList = ['A', 'B', 'C' , 'D' ];
//
let parts = new Intl.ListFormat('en', {
  style: 'long',
  type: 'conjunction',
}).formatToParts(itemList);
console.log(parts);
// [[object Object] {
//   type: "element",
//   value: "A"
// }, [object Object] {
//   type: "literal",
//   value: ", "
// }, [object Object] {
//   type: "element",
//   value: "B"
// }, [object Object] {
//   type: "literal",
//   value: ", "
// }, [object Object] {
//   type: "element",
//   value: "C"
// }, [object Object] {
//   type: "literal",
//   value: ", and "
// }, [object Object] {
//   type: "element",
//   value: "D"
// }]
partValues = parts.map((p) => p.value);
console.log(partValues);//["A", ", ", "B", ", ", "C", ", and ", "D"]

Intl.ListFormat.formatToParts() 的功用和之前的 初探 Intl.NumberFormat.formatToParts() 差不多，都是把結果切成很多的物件，如同範例的 parts 一樣，如果要提取每個物件的 value 的話，透過 Array.map()  就可以輸出包含每個 value 的陣列。

 

參考資料

[ developer.mozilla.org ] Intl.ListFormat.formatToParts()

相關文章與資料

初探 Intl.ListFormat()

初探 Intl.NumberFormat.formatToParts()

 初探 Intl.ListFormat()

前言

  在書寫文章時，有多個選項時會書寫成"A、B與C"這項的格式 ，Intl.ListFormat() 可以依據不同的地區提供此格式，在此把學習過程做個紀錄。

內容

  範例如下

const itemList = ['A', 'B', 'C' , 'D' ];

console.log( new Intl.ListFormat('en', {
  style: 'long',
  type: 'conjunction',
}).format(itemList) );//A, B, C, and D
//
console.log( new Intl.ListFormat('zh-TW', {
  style: 'long',
  type: 'conjunction',
}).format(itemList) );//A、B、C和D
//
console.log( new Intl.ListFormat('zh-TW', {
  style: 'long',
  type: 'disjunction',
}).format(itemList) );//A、B、C或D
//
console.log( new Intl.ListFormat('zh-TW', {
  style: 'long',
  type: 'unit',
}).format(itemList) );//A B C D

Intl.ListFormat() 是用來顯示陣列的內容，讓內容可以符合當地的文法書寫，第一例顯示是以 en 來示範，可以看到顯示的結果是 A, B, C, and D ，最後兩個項目會插入一個 and ，接著把區域改成 zh-TW 得到的結果是 A、B、C 和 D ，最後兩個選項會插入"和"，選項間的符號也變成 、  ，參數的 type 還可以是 disjunction 與 unit ，當輸入 disjunction  後，最後兩個項目插入會變成"或"，當樹入 unit ，最後兩個選項就不再插入字，項目間會是用"空白"隔開，可以理解就只是單純的個別顯示。

參考資料

[ developer.mozilla.org ] Intl.ListFormat

 調整 Intl 的數字系統

前言

  Intl 可以調整數字系統，在此把學習的過程做個紀錄'。

內容

  範例如下

console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  numberingSystem : 'arab',
  }).format( 1234567890) );//١٬٢٣٤٬٥٦٧٬٨٩٠ 公升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  numberingSystem : 'hans',
  }).format( 1234567890) );//1,234,567,890 公升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  numberingSystem : 'mathsans',
  }).format( 1234567890) );//𝟣,𝟤𝟥𝟦,𝟧𝟨𝟩,𝟪𝟫𝟢 公升
//follow can't work in Chrome
//console.log( Intl.Locale.prototype.getNumberingSystems() );

  要改變數字系統是透過 numberingSystem ，能夠填的參數可以在 Intl.Locale.prototype.getNumberingSystems() ，根據區域會有自己的預設值， zh-TW 的預設值是 hans ，範例的第一例顯示的是"阿拉伯-印度數字"，明顯的不是我們常見的數字，第三的範例看起來和 hans 一樣，但要注意數字 0 顯示得字型式不一樣的!最後的 Intl.Locale.prototype.getNumberingSystem() 被註解掉是因為它並不是每個瀏覽器都支援，至少我使用的 Chrome 目前並不支援，該作用應該是取得預設的數字系統參數，似乎真沒必要提供，因為地區本身就會有慣用的數字系統參數了，會要改的時候應該是要以非慣用的數字系統顯示才會用到，所以只要知道該地區的預設值是什麼就可以了，不能用函數詢問也沒差。

參考資料

[ developer.mozilla.org ] Intl.NumberFormat

Intl.Locale.prototype.getNumberingSystems()