JS 把陣列 Array 轉成字串與本地化的 toLocaleString()

Day 26

我不只知道你從哪裡來，還可以知道你那裡幾點、拿什麼貨幣跟你交換！

前一篇介紹了可以把陣列轉成字串的toString()的方法，今天我們就來介紹更好用的toLocaleString()。

大家應該有發現，這個方法多了個關鍵字的 Locale ，也應該猜得出來它可以幫我們做本地化這件事吧？toLocaleString()是toString()的本地化(localized)版本，它會藉由呼叫元素的toLocaleString()方法，把每個陣列元素都轉成字串，然後以區域的特性（由參數定義）來將元素轉換成當地化的版本，再串接這些結果為一個字串。

Array.prototype.toLocaleString() - JavaScript | MDN

原型： Array.prototype.toLocaleString()
功能： 將陣列裡的元素本地化，並轉換為字串。
改變： 原陣列不變。
語法： arr.toLocaleString([locales[,options]]);
回傳值： 表示數組元素的字符串。
參數： 依本地化語言標記轉換

toLocaleString()的參數，可依本地化的選擇給予語言標記當參數，再依照不同的「語言」與「區域標識符(區域設置)」顯示不同的輸出結果。語言標記是依BCP 47 - Tags for Identifying Languages為標記標準，w3schools有提供比較清楚易懂的語言標記列表。

把元素的數字都變成日幣

因為toLocaleString()有可根據語言和區域標識符(區域設置)顯示不同的輸出。也包括了幣值的轉換，幣值的代碼可參考這裏

例如，我們希望我們將一個陣列的數字，全部轉換成當地的貨幣格式顯示，就可直接使用toLocaleString()轉換，但是轉換貨幣只會對數字型別的元素有效。我們可以在toLocaleString()中帶入參數，並指明語言標記碼與貨幣的單位，就可帶出指定貨幣的符號與格式。

// 日幣
let prices = ['300', 500, 8236, 42];
prices.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
// "300,￥500,￥8,236,￥42"

// 新台幣
let prices = [300, 500, 8236, 42];
prices.toLocaleString('zh-TW', { style: 'currency', currency: 'TWD' });
// "$300.00,$500.00,$8,236.00,$42.00"

// 法國歐元
let prices = ['300', 500, 8236, 42];
prices.toLocaleString('fr-FR', { style: 'currency', currency: 'EUR' });
('300, 500,00 €, 8 236,00 €, 42,00 €'); // 因為'300'是字串，所以會忽略。

初始化數字或日期

我們也可以用toLocaleString()來初始化時間與日期，使用時必須以建構式的方式創建一個日期 Date 物件，再把這物件放入陣列裡，然後選擇「區域語言標記」來當參數，即可得到當地的時間、日期顯示格式。如果沒有給參數，toLocaleString()會以瀏覽器端為依據。

// 沒給參數 人在台灣所以是台灣時間格式
let date = new Date();
const arr = ['Taiwan, Tainan', date];
arr.toLocaleString();
// "Taiwan, Tainan,2019/10/11 上午4:38:08"

// 台灣時間
let dateTw = new Date();
const arrTw = ['Taiwan, Tainan', dateTw];
arrTw.toLocaleString('zh-TW');
// "Taiwan, Tainan,2019/10/11 上午4:38:40"

// 日本時間
let dateJp = new Date();
const arrJp = ['Japan, Osaka', dateTw];
arrJp.toLocaleString('ja-JP');
// "Japan, Osaka,2019/10/11 4:38:40"

// 法國時間
let dateFr = new Date();
const arrFr = ['France, Paris', dateFr];
arrFr.toLocaleString('fr-FR');
// "France, Paris,11/10/2019 à 04:41:10"

有了toLocaleString()，要解決與貨幣和時間日期格式，應該會更輕鬆些吧！今天就介紹到此，明天是週末，我們繼續鐵人喔～

如有需要改進的地方，拜託懇求請告知，我會盡量快速度修改，感謝您～