iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 26
3
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(),要解決與貨幣和時間日期格式,應該會更輕鬆些吧!今天就介紹到此,明天是週末,我們繼續鐵人喔~

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


上一篇
JS 把陣列 Array 轉成字串的 toString()
下一篇
JS 找出元素索引值的陣列 Array 方法 indexOf()
系列文
JavaScript之一定要了解的 Array 與方法34

1 則留言

1
Chris
iT邦新手 5 級 ‧ 2019-10-11 20:38:10

哇!原來還可以轉貨幣和日期

tsuifei iT邦新手 5 級 ‧ 2019-10-11 21:08:39 檢舉

這真的是寫鐵人的收穫~

真的現在才知道可以轉貨幣!

我們也可以用 toLocaleString() 來初始化時間與日起

BTW,抓個小錯字,日起 -> 日期

tsuifei iT邦新手 5 級 ‧ 2019-10-12 06:38:01 檢舉

歐~@ayugioh2003 謝謝你,現在就來改~

我要留言

立即登入留言