Do you know how to use「Intl」to change different language displayName ?
Introduction
前一陣子開發了一個 web component — <msc-ai-translator /> ，主要的功用就是透過 Web AI 來針對餵入的內容文字進行多國翻譯。如下方展示影片所，當使用者選好欲進行翻譯的語言後，按下翻譯按鈕後便能在極短的時間內取得相關翻譯後的內容。
開發期間發想，為了讓不同語系的開發者也能順暢無礙的使用這個 web component，所以有特別抽出一個 property — optionslanguage，便是希望開發者可以透過這個 property 的設置，讓使用者選擇欲進行翻譯的語言時可以一目瞭然。畢竟不同國家針對語言顯示大不同，也不是每個人都可以看得懂英文，所以要達成這樣的需求就變得很不容易。
上面這個 video 便是展示透過更改 property — optionslanguage 來動態更換 select 的翻譯語言。這也是筆者今天想跟大家聊聊如何快速地達成 property 置換來 mutate select options 的方法。
How to archive this goal？
初期想法就是用土炮搞 mapping table，針對各個語系去做不同的 options content mapping。由於是在 client 做變化，也就是說這張 mapping table 需要塞入 web component 當中，雖然說可以快速的達到我們的需求，但是對於日後的 maintain 來說就會增加一定程度的依賴與負擔（畢竟每增加一個語系支援就會增加這張 table 的 size）。
其實 Web API 有個跨國支援的物件 Intl 可以使用，當初就是想有效解決不同地區語系、數字、時間格式差異所帶來的困擾，所以可以透過它來快速取得不同語系各項衡量單位與顯示上的差異。
也就是說我們可以透過 Intl 的導入，便能快速的完成我們的需求了。
如上方 sample code 所示，我們透過 new window.Intl.DisplayNames 來宣告我們想要取得 en 這個語系對應的語言顯示物件。這時候只要 call 對應的 method of 便可以換出對應的語言顯示名稱了。
把 code 稍微整理一下並寫完整些便可以得到：
當 developer call switchOptionsLanguage 這個 method 的時候，我們先透過 Intl 整理出 targetLanguage 對應的語言顯示物件，然後搭配 Mustache 輔助取得完整 options 對應的 HTML string，最後再搭配 insertAdjacentHTML 來將這 HTML string 塞入 select 中進行活化，便可以輕輕鬆鬆完成依照不同語系快速置換對應的語言顯示需求了～
Conclusion
對於需要支援不同語系的服務來說，Intl 絕對是你的最佳輔助小幫手，更可以讓開發好的 code 變得輕盈且好維護。與其土炮亂幹一通，倒不如找對工具與方法才是最佳解～