Hosee的空間

2024年10月7日星期一

前言

Intl.ListFormat 並不是支援所有的區域，所以是可以詢問所需區域是否支援，在此把學習的過程做個紀錄。

內容

範例如下

const locales = ["zh-TW", "ABC", "en-US"];
const options = { localeMatcher: "lookup" };
console.log(Intl.ListFormat.supportedLocalesOf("zh-TW", options));//["zh-TW"]
console.log(Intl.ListFormat.supportedLocalesOf(locales, options));//["zh-TW", "en-US"]

透過 Intl.ListFormat.supportedlocalesOf() 來詢問，要注意要把每個要詢問的區域放到陣列來詢問，也可以直接輸入區域來詢問單一區域，用起來相當簡單，不論輸入是單一區域或陣列結果都是回傳陣列，可以看到到範例輸入的無效區域沒有再結果出現。

參考資料

2024年9月30日星期一

前言

Intl.ListFormat 參數可以跟複製 Intl.NumberFormat 的參數一樣複製參數嗎?答案是可以的，且用法還是一樣的!在此把學習的過程做個紀錄。

內容

範例如下

let listFormat = new Intl.ListFormat('zh-TW', {
  style: 'long',
  type: 'conjunction',
} );
//
let options = listFormat.resolvedOptions();
//
console.log( options.locale);//zh-TW
console.log( options.style);//long
console.log( options.type);//conjunction

要複製參數依舊透過 resolvedOptions() 來取得，回傳值會有各個參數，直接對該值取得即可，用法與 Intl.NumberFormat 的使用是一樣的。

參考資料

2024年9月23日星期一

前言

在先前的初探 Intl.ListFormat() 介紹了使用各種 type 後的結果差異，會引響結果的參數還有 style ，在此把學習的過程做個紀錄。

內容

範例如下

const itemList = ['A', 'B', 'C' , '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: 'short',
  type: 'conjunction',
}).format(itemList) );//A、B、C和D
//
console.log( new Intl.ListFormat('zh-TW', {
  style: 'narrow',
  type: 'conjunction',
}).format(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('en', {
  style: 'short',
  type: 'conjunction',
}).format(itemList) );//A, B, C, & D
//
console.log( new Intl.ListFormat('en', {
  style: 'narrow',
  type: 'conjunction',
}).format(itemList) );//A, B, C, D
//
console.log( new Intl.ListFormat('en', {
  style: 'long',
  type: 'unit',
}).format(itemList) );//A, B, C, D

這次調整 style 的參數，可以是 long 、 short 與 narrow ，預設是 long ，範例的地區使用 zh-TW 時發現這三種參數結果是一樣的!但當地區改成 en 後，結果就有差異，使用 short 後會發現 and 會被戴換成 & ，使用 narrow 後更是發現連 and 都不見了!結果會和把 type 輸入 unit 的結果一樣，也就是說當 type 是 conjuction 時不一定都會顯示 and ，還要看 style 與地區的參數才能決定是否有 and。

參考資料

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

2024年9月16日星期一

初探 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 的陣列。

參考資料

2024年9月9日星期一

初探 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 ，最後兩個選項就不再插入字，項目間會是用"空白"隔開，可以理解就只是單純的個別顯示。

參考資料

2024年9月2日星期一

調整 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 目前並不支援，該作用應該是取得預設的數字系統參數，似乎真沒必要提供，因為地區本身就會有慣用的數字系統參數了，會要改的時候應該是要以非慣用的數字系統顯示才會用到，所以只要知道該地區的預設值是什麼就可以了，不能用函數詢問也沒差。

參考資料

Intl.Locale.prototype.getNumberingSystems()

2024年8月26日星期一

再探 Intl.NumberFormat 控制顯示位數

前言

在先前的在 Intl.NumberFormat 控制顯示位數介紹了控制顯示位數的參數，但發現少介紹兩個，這次把它補齊，在此把學習的過程做個紀錄。

內容

範例如下

console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  minimumSignificantDigits : 4,
  }).format( 10) );//10.00 公升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  maximumSignificantDigits : 4,
  }).format( 10.5678) );//10.57 公升

少介紹的參數為 minimunSignificantDigits 與 maximunSignificantDigits ，分別控制最大與最少的顯示位數，這個顯示顯示是整數與小樹一起算的，範例的第一例的 10 ，顯示結果是 10.00 是因為要補足最少顯示位數 4 ，所以最後補了兩位小數，第二例顯示結果是 10.57 ，由於最大顯示位數是 4 加上小數第三位的四捨五入，所以結果不是 10.56 ，而是 10.57。

參考資料

2024年8月19日星期一

再探 Intl.NumberFormat 的進位原則

前言

在調整 Intl.NumberFormat 的進位原則探索了部分參數的使用，這次把剩下的參數也試用一下，在此把學習的過程做個紀錄。

內容

範例如下

console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  maximumFractionDigits : 1,
  roundingMode : 'halfCeil'
  }).format( -10.56) );//-10.6 公升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  maximumFractionDigits : 1,
  roundingMode : 'halfExpand'
  }).format( -10.54) );//-10.5 公升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  maximumFractionDigits : 1,
  roundingMode : 'halfFloor'
  }).format( -10.54) );//-10.5 公升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  maximumFractionDigits : 1,
  roundingMode : 'halfTrunc'
  }).format( -10.56) );//-10.6 公升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  maximumFractionDigits : 1,
  roundingMode : 'halfEven'
  }).format( -10.56) );//-10.6 公升
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  maximumFractionDigits : 1,
  roundingMode : 'halfEven'
  }).format( -10.45) );//-10.4 公升

剩下的參數為 halfCeil 、 halfExpand 、halfFloor 、 halfTrunc 與 halfEven ，這次的參數不是很容易懂，halfCeil 在正值時採取"四捨五入"，負值時採取"六進五捨"，halfCeil 的正值與負值一樣採用"四捨五入"，也是預設的參數，halfFloor 在正值時採取"六進五捨" ，負值則採用"四捨五入"，halfTrunc 則是正值與負值一樣採用"六進五捨"，最後一個參數 halfEven ，如果進位的數字本身已是奇數結果會和 halfExpand 一樣，範例的 -10.56 裡的進位數字是 5 ，所以進位發生，但如果把數字換成 -10.45 ，這時進位數字是 4 ，也就是偶數，這時所有的進位都不會發生，可以把 halfEven 想成是只有進位數是奇數時才採取"四捨五入"。

參考資料

2024年8月12日星期一

調整 Intl.NumberFormat 的進位原則

前言

Intl.NumberFormat 的進位原則是可以透過參數調整的，在此把學習的過程做個紀錄。

內容

範例如下

let numFormat = new Intl.NumberFormat("zh-TW", {
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  maximumFractionDigits : 1,

});
//
console.log( numFormat.format(10.54) );//10.5 公升
console.log( numFormat.format(10.55) );//10.6 公升

//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  maximumFractionDigits : 1,
  roundingMode : 'ceil'
  }).format( -10.54) );//-10.5 公升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  maximumFractionDigits : 1,
  roundingMode : 'expand'
  }).format( -10.54) );//-10.6 公升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  maximumFractionDigits : 1,
  roundingMode : 'floor'
  }).format( -10.51) );//-10.6 公升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  maximumFractionDigits : 1,
  roundingMode : 'trunc'
  }).format( -10.51) );//-10.5 公升

範例開頭示範不調整時會以四捨五入為原則來調整，如果要調整原則要透過 roundingMode 參數來調整，由於參數有點多，這次介紹 ceil 、expand 、 floor 與 trunc 這四個參數，ceil 與 expand 可以簡化成"無條件進位"，那分兩個的意義呢?主要差異在負數時的進位， ceil 會進位到 -10.5 ，但 expand 會進位到 -10.6 ， floor 與 trunc 也是一樣的關係，理解成無條件捨棄，但在負數時的原則會不一樣， floor 會捨棄到 -10.6 ， trunc 則是 -10.5 。

參考資料

2024年8月5日星期一

調整 Intl.NumberFormat 的顯示小數的原則

前言

Intl.NumberFormat 在顯示美金時會顯示到小數第二位，但如果需要有小數時才顯示小數可行嗎?查了一下可以透過參數調整完成，在此把學習的過程做個紀錄。

內容

範例如下

let numFormatAuto = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  trailingZeroDisplay : 'auto',
});

console.log( numFormatAuto.format(10000) );//$10,000.00
//
let numFormatStripIfInteger = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  trailingZeroDisplay : 'stripIfInteger'
});

console.log( numFormatStripIfInteger.format(10000) );//$10,000
console.log( numFormatStripIfInteger.format(10000.25) );//$10,000.25

//
let numFormat = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits : 0
});

console.log( numFormat.format(10000.25) );//$10,000

要調整顯示小數的原則是透過 trailingZeroDisplay ，參數有 auto 與 stripIfInteger ，auto 就是預設值，如範例會顯示到小數第二位，使用 stripIfInteger 後，當數值是整數時就不在顯示小數，當有小數時還是會顯示小數，也許你會想到可以透過 maximumFractionDigits 來做到不顯示小數，但使用 maximumFractionDigits 會變成無論如何都不顯示小數，和 stripIfInteger 是不一樣的。

參考資料

2024年7月29日星期一

調整 Intl.NumberFormat 的顯示數字的格式

前言

電子工程常常把 1000 記為 K ，百萬記為 M ， Intl.NumberFormat 支援這樣的顯示方式嗎?答案是可行的，而且只需透過簡單的參數調整即可完成，在此把學習的過程做個紀錄。

內容

範例如下

let numFormatStandard = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  notation:'standard',
});

console.log( numFormatStandard.format(10000) );//$10,000.00
//
let numFormatScientific = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  notation:'scientific',
});

console.log( numFormatScientific.format(10000) );//$1.00E4
//
let numFormatEngineering = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  notation:'engineering',
});

console.log( numFormatEngineering.format(10000) );//$10.00E3
//
let numFormatCompact = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  notation:'compact',
});

console.log( numFormatCompact.format(10000) );//$10K

透過 notation 參數可以調整顯示數字的格式，參數有 standard 、scientific 、engineering 與 compact ， standard 就是預設值，也是最常見的狀況，scientific 與 engineering 的格式都是在數字末端加 E 來表達，由於我本身對這種格式不熟，就不多作介紹，最後是 compact ，這個格式就是 1000 記為 K ，百萬記為 M 的顯示格式。

參考資料

2024年7月22日星期一

複製 Intl.NumberFormat 的參數

前言

Intl.NumberFormat 在初始化時可以輸入很多參數，如果需要用同樣的參數但不同的地區該如何達成? Intl.NumberFormat 有提供複製參數的方法，在此把學習的過程做個紀錄。

內容

範例如下

let numFormatUS = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 2,
  roundingIncrement: 5,
  roundingMode: "halfCeil",
});
let options = numFormatUS.resolvedOptions();
console.log( options.locale );//en-US
console.log( options.currency );//USD
//
let numFormatTW = new Intl.NumberFormat( "zh-TW",options );

console.log( numFormatUS.format(10) );//$10.00
console.log( numFormatTW.format(10) );//US$10.00
//
console.log( numFormatTW.format(10.255) );//US$10.25

複製參數是透過 Intl.NumberFormat.resolvedOptions() ，回傳值是個 Object ，裡面有全部的參數，範例分別顯示了 locale 與 currency ，接著進行複製，複製時發現參數本身有 locale ，但初始化的第一個參數也是 locale ，哪會以哪個為主?結果是以初始化的第一個參數為主，回傳的 option 只是拿來讀取的，在複製時不會有作用，最後用顯示 10.255 來檢測 maximumFractionDigits 有沒有確實被複製，結果正確。

參考資料

2024年7月15日星期一

注意初探 Intl.NumberFormat.formatRangeToParts() 輸出不一定是範圍

前言

在先前的初探 Intl.NumberFormat.formatRangeToParts() 基本的使用了 formatRangeToParts() ，在更之前的使用 Intl.NumberFormat 顯示數值範圍也是顯示範圍，但它可能會顯示近似值，formatRangeToParts() 也是如此嗎?是的，在此把學習的過程做個紀錄。

內容

範例如下

let parts = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
}).formatRangeToParts( 3.5 , 4.4);

console.log(parts);


// [[object Object] {
//   source: "shared",
//   type: "approximatelySign",
//   value: "~"
// }, [object Object] {
//   source: "shared",
//   type: "currency",
//   value: "$"
// }, [object Object] {
//   source: "shared",
//   type: "integer",
//   value: "4"
// }]


partValues = parts.map((p) => p.value);
console.log(partValues);//["~", "$", "4"]

formatRangeToParts() 也是會有顯示近似值的狀況，設好 maximumFractionDigits ，就可能發生顯示近似值，如範例示範的範圍，如果只想取數值一樣透過 map() 來處理，使用 Intl.NumberFormat.formatRangeToParts() 要考慮有顯示近似值的可能。

參考資料

2024年7月8日星期一

初探 Intl.NumberFormat.formatRangeToParts()

前言

在上次初探 Intl.NumberFormat.formatToParts() 介紹了 formatToParts() ，這次學習的 formatRangeToParts() 跟它很像，在此把學習的過程做個紀錄。

內容

範例如下

let parts = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
}).formatRangeToParts( 123.45 , 1500);
console.log(parts);

// [[object Object] {
//   source: "startRange",
//   type: "currency",
//   value: "$"
// }, [object Object] {
//   source: "startRange",
//   type: "integer",
//   value: "123"
// }, [object Object] {
//   source: "startRange",
//   type: "decimal",
//   value: "."
// }, [object Object] {
//   source: "startRange",
//   type: "fraction",
//   value: "45"
// }, [object Object] {
//   source: "shared",
//   type: "literal",
//   value: " – "
// }, [object Object] {
//   source: "endRange",
//   type: "currency",
//   value: "$"
// }, [object Object] {
//   source: "endRange",
//   type: "integer",
//   value: "1"
// }, [object Object] {
//   source: "endRange",
//   type: "group",
//   value: ","
// }, [object Object] {
//   source: "endRange",
//   type: "integer",
//   value: "500"
// }, [object Object] {
//   source: "endRange",
//   type: "decimal",
//   value: "."
// }, [object Object] {
//   source: "endRange",
//   type: "fraction",
//   value: "00"
// }]


partValues = parts.map((p) => p.value);
console.log(partValues);//["$", "123", ".", "45", " – ", "$", "1", ",", "500", ".", "00"]



用法和 formatToParts() 很像，指示輸入需要輸入兩個數值來表達範圍，輸出的結果會是個陣列，裡面會有分割好的各部位資料，如果要直接提取可以透過 map() 來提取所有的數值，就像範例的 partValues 一樣，如此就可以直接提取各個部位的資料。

參考資料

2024年7月1日星期一

初探 Intl.NumberFormat.formatToParts()

前言

Intl.NumberFormat 可以顯示數值，但如果只需要小數的部分有辦法做到嗎?可以透過 Intl.NumberFormat.formatToParts() 來達成，在此把學習的過程做個紀錄。

內容

範例如下

let parts = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
}).formatToParts( 123.45 );
console.log(parts);
//[[object Object] {
//   type: "currency",
//   value: "$"
// }, [object Object] {
//   type: "integer",
//   value: "123"
// }, [object Object] {
//   type: "decimal",
//   value: "."
// }, [object Object] {
//   type: "fraction",
//   value: "45"
// }]
//
partValues = parts.map((p) => p.value);
console.log(partValues);//["$", "123", ".", "45"]

Intl.NumberFormat.formatToParts() 的回傳值是個陣列，不過裡面的內容會含有每個部位的名稱，如果不需要可以透過 map() 來過濾，如同範例的 partValues ，這樣就可以方便提取各部位。

參考資料

2024年6月24日星期一

使用 Intl.NumberFormat 顯示數值範圍

前言

Intl.NumberFormat 不只可以顯示單一數值，也支援顯示數值範圍，在此把學習的過程做個紀錄。

內容

範例如下

console.log( new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  //maximumFractionDigits: 0,
}).formatRange(3 , 5) );//$3.00 – $5.00
//
console.log( new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
}).formatRange(3 , 5) );//$3 – $5
//
console.log( new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
}).formatRange(3.5 , 5.5) );//$4 – $6
//
console.log( new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
}).formatRange(3.4 , 5.4) );//$3 – $5
//
console.log( new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
}).formatRange(3.5 , 4.4) );//~$4

要顯示數值範圍可以透過 Intl.NumberFormat.formatRange() ，參數就是兩個 Number，個別是範圍的開頭與範圍的結束，第一例就簡單地使用顯示數值範圍，第二例搭配先前的在 Intl.NumberFormat 控制顯示位數，可以控制顯示小數位數，顯示的數值如果低於精度會採取四捨五入的原則來顯示，這點可以在第三例與與第四例看到，第五例比較特別，如果範圍差在最低精度時，且範圍開頭會被五入，這樣就會被顯示成近似於數值，這是 Intl.NumberFormat.formatRange() 相當特別的規則。

參考資料

2024年6月17日星期一

在 Intl.NumberFormat 控制顯示位數

前言

Intl.NumberFormat 提供控制顯示位數的功能，在此把學習的過程做個紀錄。

內容

範例如下

//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'auto',
  minimumIntegerDigits : 3
  }).format( 10) );//010 升

//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'auto',
  minimumFractionDigits : 3
  }).format( 10) );//10.000 升

//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'auto',
  maximumFractionDigits : 3
  }).format( 10.12345) );//10.123

控制顯示位數的參數分別是 minmumIntegerDigits 、 minmumFractionDigits 與 maxmumFractionDigits ， minmumIntegerDigits 是最少整數的顯示位數，如果要顯示的位數彼此數還小前方會補零，minmumFractionDigits 與 maxmumFractionDigits 分別代表最少小數顯示位數與最大小數顯示位數，minmumFractionDigits 碰到為數不足時會補零，maxmumFractionDigits 在超出為數時會直接不顯示。

參考資料

2024年6月10日星期一

調整 Intl.NumberFormat 正負號顯示

前言

使用 Intl.NumberFormat 時，當數值是負的時候才顯示負號，這是常見的狀況，但如果碰到特殊狀況時可以改嗎?答案是可以的，在此把學習的過程做個紀錄。

內容

範例如下

let number = 100;
let numberZ = 0;
let numberN = -100;
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'auto',
  }).format( number) );//100 升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'auto',
  }).format( numberZ) );//0 升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'auto',
  }).format( numberN) );//-100 升
//
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'always',
  }).format( number) );//+100 升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'always',
  }).format( numberZ) );//+0 升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'always',
  }).format( numberN) );//-100 升

//
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'exceptZero',
  }).format( number) );//+100 升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'exceptZero',
  }).format( numberZ) );//0 升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'exceptZero',
  }).format( numberN) );//-100 升
//
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'negative',
  }).format( number) );//100 升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'negative',
  }).format( numberZ) );//0 升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'negative',
  }).format( numberN) );//-100 升
//
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'never',
  }).format( number) );//100 升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'never',
  }).format( numberZ) );//0 升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'never',
  }).format( numberN) );//100 升

透過 signDisplay 可以調整正負號顯示，參數有 auto 、 always 、 exceptZero 、 negative 與 never ， auto 就是預設，也是常見的只在負值時顯示負號，always 則是無論如何都顯示正負號，包含 0 ，exceptZero 也是都顯示正負號，但 0 的時候不顯示，negative 則是指在負值顯示，這行為和 auto 是一樣的，never 則是無論如何都不顯示正負號。範例都是用顯示單位的方式使用，但這個參數不只作用在單位顯示，在百分比與貨幣時一樣適用。

參考資料

2024年6月3日星期一

調整 Intl.NumberFormat 顯示單位

前言

Intl.NumberFormat 可以顯示單位，但有些單位會有需要顯示所縮寫或完整顯示的需求，這時就需要透過參數的調整來顯示，在此把學習的過程做個紀錄。

內容

範例如下

let number = 100;
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'short',
  }).format( number) );//100 升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'narrow',
  }).format( number) );//100升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  }).format( number) );//100 公升

要調整顯示單位可以透過 unitDisplay 來調整，可以接受的參數有 short 、 narrow 與 long ，範例以公升來示範， short 顯示(空白)與升，narrow 就只顯示升，long 才會顯示(空白)與公升，short 與 narrow 顯示縮寫，差異在於有沒有空白，long 則是完全顯示。

參考資料

2024年5月27日星期一

使用 Intl.NumberFormat 顯示單位

前言

Intl.NumberFormat 不只可以顯示錢幣，還可以用來顯示單位，在此把學習的過程做個紀錄。

內容

範例如下

let number = 100;
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'meter'
  
  }).format( number) );//100 公尺
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'centimeter'
  
  }).format( number) );//100 公分
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'kilogram'
  
  }).format( number) );//100 公斤

使用 Intl.NumberFormat 顯示單位時，要在 style 輸入 unit ，接著就可以透過 unit 來輸入要顯示的單位，單位的參數可以透過 Single units sanctioned for use in ECMAScript 來查詢，範例分別示範了公尺、公分與公斤。

參考資料

Single units sanctioned for use in ECMAScript

2024年5月20日星期一

使用 Intl.NumberFormat 選擇記帳格式

前言

在查閱 Intl.NumberFormat 的功能時發現有個參數可以調整記帳格式，在此把學習的過程做個紀錄。

內容

範例如下

let number = -1234;
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'currency', 
  currency: 'TWD' ,
  currencySign : 'standard'
  
  }).format( number) );//-$1,234.00

//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'currency', 
  currency: 'TWD' ,
  currencySign : 'accounting'
  
  }).format( number) );//($1,234.00)

調整記帳格式的差異在於有的區域記帳時顯示負值的方式不是用負號，而是使用括號，可以透過 currencySign 來調整，參數內容可以是 stardard 與 accounting ，預設為 stardard ，範例使用 stardard 如預期在前方加負號顯示，使用 accounting 則是越括號來表達。

參考資料

2024年5月13日星期一

使用 Intl.NumberFormat 選擇貨幣顯示的方式

前言

在先前的初探 Intl.NumberFormat 介紹了顯示貨幣的方式，但貨幣都是用符號來顯示， Intl.NumberFormat 還支援其它的顯示方式，在此把學習的過程做個紀錄。

內容

範例如下

let number = 1234;
//
console.log( new Intl.NumberFormat('de-DE', { 
  style: 'currency', 
  currency: 'EUR',
  currencyDisplay : 'code'
  }).format( number) );//1.234,00 EUR
//
console.log( new Intl.NumberFormat('ja-JP', { 
  style: 'currency', 
  currency: 'JPY',
  currencyDisplay : 'symbol'
  }).format( number) );//￥1,234
//
console.log( new Intl.NumberFormat('en-US', { 
  style: 'currency', 
  currency: 'TWD' ,
  }).format( number) );//NT$1,234.00
//
console.log( new Intl.NumberFormat('en-US', { 
  style: 'currency', 
  currency: 'TWD' ,
  currencyDisplay : 'narrowSymbol'
  }).format( number) );//$1,234.00
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'currency', 
  currency: 'TWD' ,
  currencyDisplay : 'name'
  
  }).format( number) );//1,234.00 新台幣

控制顯示貨幣的方式是透過 currencyDisplay 來調整，參數可輸入 code 、 symbol 、 narrowSymbol 與 name ， code 顯示就是用貨幣碼來顯示， symbol 就是符號也是預設的參數， narrowSymbol 目前只發現在顯示非本國貨幣時會有差異，範例示範在 en-US 顯示台幣時的差異，最後，name 是用文字來顯示貨幣。

參考資料

2024年5月6日星期一

使用 Intl.NumberFormat 顯示百分比

前言

在初探 Intl.NumberFormat 示範如何顯示幣值，但 Intl.NumberFormat 不只能顯示幣值，也能顯示百分比，在此把學習的過程做個紀錄。

內容

範例如下

let number = 0.25;
//
console.log( new Intl.NumberFormat('de-DE', { 
  style: 'percent', 
  }).format( number) );//25 %
//
console.log( new Intl.NumberFormat('ja-JP', { 
  style: 'percent', 
  }).format( number) );//25%
//
console.log( new Intl.NumberFormat('zh-tw', { 
  style: 'percent', 
  }).format( number) );//25%

使用的方法是在 style 參數使用 persent ，要注意 1 代表 100% ，不同區域是有差別的!範例的第一個示範顯示會多空一個空格。

參考資料

2024年4月29日星期一

初探 Intl.NumberFormat

前言

這次來學習透過 Intl.NumberFormat 顯示貨幣價值，在此做個紀錄。

內容

範例如下

let number = 1234;
//
console.log( new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' 
  }).format( number) );//1.234,00 €
//
console.log( new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' 
  }).format( number) );//￥1,234
//
console.log( new Intl.NumberFormat('zh-TW', { style: 'currency', currency: 'TWD' 
  }).format( number) );//$1,234.00

使用的方法跟其他的 Intl 差不多，不過要注意 currency 這個參數，這個參數引響顯示幣值的符號，要輸入的代碼可以在 [ en.wikipedia.org ] ISO 4217 查詢，區域碼會引響的是貨幣符號在前後與是否顯示小術後兩位。

參考資料

[ en.wikipedia.org ] ISO 4217

2024年4月22日星期一

改用凌晨的方式表達時間

前言

Intl.DateTimeFormat() 有參數可以改以凌晨的方式來表達時間，在此把學習的過程做個紀錄。

內容

範例如下

const date = new Date(Date.UTC(2020, 11, 20, 16, 23, 16, 738));
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h11',
  dayPeriod : 'narrow',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 凌晨0:23:16.738
//
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h11',
  dayPeriod : 'short',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 凌晨0:23:16.738
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h11',
  dayPeriod : 'long',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 凌晨0:23:16.738

改變的方法是透過 dayPeriod ，參數有三種，分別是 narrow 、 short 與 long ，範例個別示範一次，要注意的是 dayPeriod 必須搭配 hourCycle 來使用，只有當 hourCycle 是 h11 與 h12 時才有作用，範例的結果三個都是一樣的，可能跟區域有關，換成 fr 的話，第三個會有不同。

參考資料

[ developer.mozilla.org ] Intl.DateTimeFormat() constructor'

2024年4月15日星期一

在 Intl.DateTimeFormat 顯示時區

前言

先前使用 Intl.DateTimeFormat 都沒顯示時區，要如何顯示呢?在此把學習的過程做個紀錄。

內容

範例如下

const date = new Date(Date.UTC(2020, 11, 20, 16, 23, 16, 738));
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h23',
  timeZoneName : 'short',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 00:23:16.738 [GMT+8]
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h23',
  timeZoneName : 'long',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 00:23:16.738 [台北標準時間]
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h23',
  timeZoneName : 'shortOffset',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 00:23:16.738 [GMT+8]
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h23',
  timeZoneName : 'longOffset',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 00:23:16.738 [GMT+08:00]
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h23',
  timeZoneName : 'shortGeneric',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 00:23:16.738 [台灣時間]
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h23',
  timeZoneName : 'longGeneric',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 00:23:16.738 [台北標準時間]

透過 timeZoneName 可以顯示時區，但只能用於自訂格式，如果與 dateStyle 或 timeStyle 混用會報錯，有六種參數可以用， short 、 long 、shortOffset 、 longOffset 、 shortGeneric 與 longGeneric ，範例分別個示範一次。

參考資料

[ developer.mozilla.org ] Intl.DateTimeFormat() constructor'

2024年4月8日星期一

進階調整 Intl.DateTimeFormat 的時間為 24 小時制

前言

在先前的調整 Intl.DateTimeFormat 的時間為 24 小時制介紹了調整為 24 小時制的方法，但調整的方法其實不只這一種，有另外一種調整法，在此把學習的過程做個紀錄。

內容

範例如下

const date = new Date(Date.UTC(2020, 11, 20, 16, 23, 16, 738));
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
  timeStyle: 'short',
  hourCycle : 'h23',
}).format(date));//2020/12/21 00:23
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
  timeStyle: 'short',
  hourCycle : 'h24',
}).format(date));//2020/12/21 24:23
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
  timeStyle: 'short',
  hourCycle : 'h12',
}).format(date));//2020/12/21 凌晨12:23
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
  timeStyle: 'short',
  hourCycle : 'h11',
}).format(date));//2020/12/21 上午0:23

上次調整 Intl.DateTimeFormat 的時間為 24 小時制是透過 hour12 來調整，這次會使用 hourCycle ，有 4 種參數可以調，分別是 h11 、h12 、h23 與 h24 ，範例都分別示範一次，同為24 小時制有兩種顯示方式，一種顯示 00 ，另一種顯示 24 ，h11 與 h12 也是一樣。使用上要注意 hour12 與 hourCycle 最好不要同時使用，可能在不同瀏覽器會有不同的結果，hour12 為 True 可以用 h12 來替代，為 False 時使用 h24 來替代，這樣就可以完全用不到 hour12 ，也就不會發生混用的情形。

參考資料

[ developer.mozilla.org ] Intl.DateTimeFormat() constructor'

2024年4月1日星期一

調整 Intl.DateTimeFormat 的時間為 24 小時制

前言

在先前示範 Intl.DateTimeFormat 都是採取 12小時制，會分上午或下午，要如何改成 24 小時制呢?在此把學習的過程做個紀錄。

內容

範例如下

const date = new Date(Date.UTC(2020, 11, 20, 5, 23, 16, 738));
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
  timeStyle: 'short',
  hour12 : false
}).format(date));//2020/12/20 13:23
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  formatMatcher:'best fit',
  hour12 : false
}).format(date));//2020年12月20日 星期日 13:23:16.738

透過第二個參數裡的 hour12 參數就可以調整成 24 小時制，該值預設是 true ，有舊是 12 小時制，將其設為 false 就是 24 小時制，此參數不管是常見的格式或自訂的格式都可以使用，範例分別都示範一次。

參考資料

[ developer.mozilla.org ] Intl.DateTimeFormat() constructor'

2024年3月25日星期一

自訂 Intl.DateTimeFormat 的格式

前言

在之前的調整 Intl.DateTimeFormat 的格式示範如何調整格式，但都是常見的制式化格式，這些格式都不會顯示秒，如果要顯示秒就要靠訂定格式，在此把學習的過程做個紀錄。

內容

範例如下

const date = new Date(Date.UTC(2020, 11, 20, 3, 23, 16, 738));
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
  timeStyle: 'short',
}).format(date));//2020/12/20 上午11:23
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3
}).format(date));//2020年12月20日 星期日 上午11:23:16.738

要自訂格式一樣是透過第二個參數，直接輸入要顯示的部分的參數即可，不只可以顯示秒，還可以顯示千分之一秒還有星期幾，這些是制式化格是不會顯示的，範例先示範制式化的格式，接著在示範這次的自訂格式，有一點是要注意的，制式化格式的參數 dateStyle 與 timeStyle ，式不可以跟自訂的參數混用的!只要混用就會報錯。

參考資料

[ developer.mozilla.org ] Intl.DateTimeFormat() constructor

2024年3月18日星期一

關於 smart failure predicted 的處理

前言

最近有硬碟損壞，開機時會出現 smart failure predicted ，本以為硬碟就這麼毀了，資料來不及複製有些可惜，但查了一下網路發現這個訊息不是指硬碟毀了，在此把學習的過程做個紀錄。

內容

smart failure predicted 指的是 smart test 有問題，不是硬碟毀了，指的是硬碟"快"毀了，既然是"快"毀了代表其實它還沒毀壞，可以在 BIOS 裡把 smart test 的選項關閉後再試著開機，這樣就可以進到作業系統把"快"毀了的硬碟資料複製出來。具體的操作可以參照以下

雖然我的主機板也是 ASUS ，但 Smart test 的選項位置與影片中的選項不一樣，但只要記得找 smart test 這個字詞，它的選項會是開與關，把它設為關閉後就可以跳過 smart failure predicted ，解著就可以進到作業系統。這個"快"毀了的硬碟在複製時會和一般的硬碟差很多，有的時候複製很正常，有的檔案複製時會像卡住一樣要複製很久，我的 2T 硬碟複製 4 天還沒結束，如果要複製"快"毀了的硬碟要準備好可以長時間不關機的環境。

2024年3月11日星期一

調整 Intl.DateTimeFormat 的格式

前言

在先前的初探 Intl.DateTimeFormat 提到 Intl.DateTimeFormat 的基本用法，但只能顯示日期沒辦法顯示時間，要如何顯示時間呢?在此把學習的過程做個紀錄。

內容

範例如下

const date = new Date(Date.UTC(2020, 11, 20, 3, 23, 16, 738));
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
  timeStyle: 'short',
}).format(date));//2020/12/20 上午11:23
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  timeStyle: 'short',
}).format(date));//上午11:23
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
}).format(date));//2020/12/20
//
console.log(new Intl.DateTimeFormat('en-us').format(date));//12/20/2020
//
console.log(new Intl.DateTimeFormat('en-us',{
  dateStyle: 'short',
}).format(date));//12/20/20
console.log(new Intl.DateTimeFormat('en-us',{
  dateStyle: 'medium',
}).format(date));//Dec 20, 2020

要顯示時間可以透過 Intl.DateTimeFormat() 的第二個參數來達成，第二個參數可以輸入 dateStyle 與 timeStyle ，兩個參數各別都可以輸入 short 、medium 、 long 與 full ，按字面上的意思就可以知道效果，範例開頭透過都輸入 short ，就可以得到同時有日期與時間的結果，如果只需要時間，就只輸入 timeStyle 參數，就可以得到只顯示時間的結果，同理，如果只顯示日期的話就只輸入 dateStyle 即可。

範例最後三個使用是在說明在不輸入參數的顯示沒被法透過透過固定的 dateStyle 與 timeStyle 來取得，不輸入參數時是 12/20/2020 ，但不論 dateStyle 輸入 short 或 medium 都無法得到何不輸入的參數同樣結果。

參考資料

[ developer.mozilla.org ] Intl.DateTimeFormat() constructor

2024年3月4日星期一

初探 Intl.DateTimeFormat

前言

如果時間格式需要在地化時要如何做呢? JavaScript 本身提供在地化的方法，也就是 Intl.DateTimeFormat() ，在此把學習的過程做個紀錄。

內容

範例如下

const date = new Date(Date.UTC(2020, 11, 20, 3, 23, 16, 738));
console.log(new Intl.DateTimeFormat('en-US').format(date));//12/20/2020
console.log(new Intl.DateTimeFormat('zh-tw').format(date));//2020/12/20
console.log(new Intl.DateTimeFormat('fr').format(date));//20/12/2020

使用 Intl.DateTimeFormat() 的方式很簡單，用 new 方式來喚起!並輸入要在地化的區域碼，再對創建的物件喚起 format() 並輸入要在地化的時間，就可以得到在地化的結果，範例的美國時間順序是"月/日/年"，台灣是"年/月/日"，最後法國是 "日/月/年"。

參考資料

[ developer.mozilla.org ] Intl.DateTimeFormat

2024年2月26日星期一

檢查 DisplayNames 的輸入碼是否有效

前言

在使用 DisplayNames.of() 時，如果輸入無效時不會有任何的錯誤拋擲，只是回傳輸入碼而已，可以用錯誤拋擲攔截嗎?答案是可以的，在此把學習的過程作的紀錄。

內容

範例如下

console.log(
  new Intl.DisplayNames("zh-tw", { type: "region", fallback: "code" }).of("TW"),
);//台灣
console.log(
  new Intl.DisplayNames("zh-tw", { type: "region", fallback: "code" }).of("DLC"),
);//RangeError: invalid_argument

檢查的方法是在 Intl.DisplayNames() 時加入 fallback 屬性，並輸入 code ，接著在喚起 DisplayNames.of() 時，如果輸入碼無效時就會拋擲錯誤，範例先輸入有效的輸入碼，結果與平常無異，接著輸入無效的輸入碼 DLC ，結果就會拋擲錯誤。

參考資料

[ developer.mozilla.org ] Intl.DisplayNames.prototype.of()

2024年2月19日星期一

取得 DisplayNames 的成員

前言

DisplayNames 是透過 Intl.DisplayNames() ，透過回傳的 Object 來使用，不過該物件不提供公開的成員來取得當初初始化的參數，如 type...等，查詢後發現是可以的，但不能直接取得，在此把學習的過程做個紀錄。

內容

要取得 DisplayNames 的成員可以透過 DisplayNames.resolvedOptions() 所回傳的物件來取得，範例如下

const displayNames = new Intl.DisplayNames(
  ["zh-tw"], 
  { type: "region" }
);
//
const usedOptions = displayNames.resolvedOptions();
console.log(usedOptions.locale); // "zh-TW"
console.log(usedOptions.type); // "region"

透過 DisplayNames.resolvedOptions() 的回傳物件就可以取得當初的初始化成員，如 locale 或 type ，感學這設計很不直覺，感覺應該設計成 Intl.DisplayNames() 會傳的物件裡面會提供 getter 才對。

參考資料

[ developer.mozilla.org ] Intl.DisplayNames.prototype.resolvedOptions()

2024年2月12日星期一

取得貨幣名稱的方法

前言

這次來學習如何取得貨幣名稱，在此把學習的過程做個紀錄。

內容

範例如下

let currencyNames = new Intl.DisplayNames(
  ["zh-tw"], 
  { type: "currency" }
);
console.log( currencyNames.of("USD") ); // "美元"
console.log( currencyNames.of("TWD") ); // "新台幣"
console.log( currencyNames.of("CNY") ); // "人民幣"

取得字體名稱是透過 [ developer.mozilla.org ] Intl.DisplayNames 來取得，要記得把屬性 type 改成 currency ，接著就可以跟往常一樣透過 of() 來取得，貨幣的參數可以透過 [ zh.wikipedia.org ] ISO 4217 來查詢，範例的人民幣是使用 CNY 而非RMB ，字碼用沒有分大小寫，盛至可以大小寫混著用，只要字碼正確即可。

參考資料

[ zh.wikipedia.org ] ISO 4217

2024年2月5日星期一

取得字體名稱的方法

前言

這次來學習如何取得字體名稱，在此把學習的過程做個紀錄。

內容

範例如下

const scriptNames = new Intl.DisplayNames("zh-tw", {
  type: "script",

});
console.log( scriptNames.of("Kana") );//片假名 
console.log( scriptNames.of("Hira") );//平假名 
console.log( scriptNames.of("Hans") );//簡體 
console.log( scriptNames.of("Hant") );//繁體

取得字體名稱是透過 [ developer.mozilla.org ] Intl.DisplayNames 來取得，要記得把屬性 type 改成 script ，接著就可以跟往常一樣透過 of() 來取得，字體的參數可以透過 [ zh.wikipedia.org ] ISO 15924 來查詢，要注意的是參數的開頭都是大寫!不能用小寫，不然結果會是錯的。

參考資料

[ zh.wikipedia.org ] ISO 15924

2024年1月29日星期一

取得語言名稱的方法

前言

在先前的取得地區名稱的方法介紹取得地區名稱的方法，這次來學習取得語言名稱的方法，在此做個紀錄。

內容

範例如下

const languageNames = new Intl.DisplayNames("zh-tw", {
  type: "language",

});
console.log( languageNames.of("fr") );//法文 
console.log( languageNames.of("zh") ); //中文
console.log( languageNames.of("fr-CA") );//法文（加拿大） 
console.log( languageNames.of("zh-hant") );//繁體中文 
console.log( languageNames.of("zh-hans") );//簡體中文

取得語言名稱一樣是透過 Intl.DisplayNames() ，在第二個參數的 type 屬性填上 language ，接著就可以一樣透過 of() 來取得語言名稱，取得語言名稱要用語言碼而非地區碼，像法文是 fr ，剛好跟地區名稱一樣，zh 指的是中文，語言也可以有地區性，如 fr-ca ，如果要指繁體中文使用的語言碼是 zh-hant ，而簡體中文的語言碼是 zh-hants 。

參考資料

2024年1月22日星期一

取得地區名稱的方法

前言

最近需要取得區域碼的中文，在此把學習的過程作的紀錄。

內容

範例如下

const regionNames = new Intl.DisplayNames(['zh-TW'], {
  type: 'region',
});
console.log( regionNames.of('TW') ); // 台灣
console.log( regionNames.of('US') ); // 美國

要取得區域碼的中文可以透過 Intl.DisplayNames() 來取得，參數1 是區域碼，參數2 是選項，區域碼可以透過 [ www.iana.org ] Root Zone Database 來查詢，前方的 zh 是中文的意思，選項的部分只要照著範例輸入就是取得區域碼，由於 Intl.DisplayNames() 並非單純設計來取得區域碼，如需要了解更多可以到 [ developer.mozilla.org ] Intl.DisplayNames 。使用 Intl.DisplayNames() 要注意是透過 new 來取得 Object ，而非直接喚起!接著就可以透過 of() 來取得區域碼的中文。 Intl.DisplayNames() 的參數1 會決定最後輸出的語言， of() 是查詢的結果，這是兩個地方輸入區域碼的不同之處。

參考資料