2024年2月26日 星期一

檢查 DisplayNames 的輸入碼是否有效

 檢查 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 的成員

前言

  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 ,字碼用沒有分大小寫,盛至可以大小寫混著用,只要字碼正確即可。


參考資料

[ developer.mozilla.org ] Intl.DisplayNames

[ 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 來查詢,要注意的是參數的開頭都是大寫!不能用小寫,不然結果會是錯的。


參考資料

[ developer.mozilla.org ] Intl.DisplayNames

[ 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 。


參考資料

[ developer.mozilla.org ] Intl.DisplayNames


相關文章與資料

取得地區名稱的方法

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() 是查詢的結果,這是兩個地方輸入區域碼的不同之處。


參考資料

[ developer.mozilla.org ] Intl.DisplayNames

[ www.iana.org ] Root Zone Database

[ blog.othree.net ] zh-tw還是zh-TW

2024年1月15日 星期一

初探 WeakSet

 初探 WeakSet

前言

  在先前的 初探 WeakMap 學習 WeakMap ,這次學習 WeakSet ,在此把學習的過程做個紀錄。


內容

  範例如下

let set = new WeakSet();
let obj1 = {};
let obj2 = {};
let obj3 = {};
//
set.add( obj1 );
set.add( obj2 );
//
console.log( set.has( obj1 ) );//true
console.log( set.has( obj3 ) );//false
//
set.delete( obj1 );
console.log( set.has( obj1 ) );//false


WeakSet 與 WeakMap 相似,功能是存放 Object 的 Set 。範例透過 WeakSet.add() 來新增,用WeakSet.has() 確認存在,如果要消除可以透過 WeakSet.delete(),用起來其實跟 Set 沒什麼兩樣,不過 WeakSet 不用像 WeakMap 擔心內容從外部移除,因為 WeakSet 只有 key ,而沒有 value。


參考資料

[ developer.mozilla.org ] WeakSet


相關文章與資料

初探 WeakMap