當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

使用 .toLocaleString() 轻松实现多国语言价格数字格式化

發布時間：2023/12/31 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了使用 .toLocaleString() 轻松实现多国语言价格数字格式化小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

用代碼對數字進行格式化，顯然不是逢三位加逗號這么簡單。比如印度在數字分位符號上的處理，就堪稱業界奇葩：

印度的數字讀法用“拉克”（十萬）和“克若爾”（千萬），數字標法用不對稱的數位分離，即小數點左側首先是三位分隔，然后繼續向左都是兩位分隔。如：三千萬（3 克若爾）會寫成 3,00,00,000。 —— 維基百科

簡單的暴利處理無法滿足多語言支持，此時使用 Number.prototype.toLocaleString() 進行數字格式化處理再好不過。

在 JavaScript 中，數字對象的 .toLocaleString() 方法如果不傳參數，則采用宿主環境的系統語言進行分位處理。

var price = 1024; price.toLocaleString(); // => "1,024"

在 ECMA-402 標準的實現中，增加了.toLocaleString() 方法對 locales 的支持，語法為 numObj.toLocaleString([locales [, options]])，locales 參數接收 BCP 47 語言標簽格式的字符串或數組

那么將數字強制轉化為印度格式就變的簡單：

var price = 1669999; price.toLocaleString('en-IN'); // => "16,69,999"

這樣就可以輕松處理多語言的自動格式化了，只要根據 <html lang="en-IN"> 中的 lang屬性動態讀取就可以了。

var price = 1669999; var lang = document.querySelector('html').getAttribute('lang'); price.toLocaleString(lang); // 中文頁面下 => "1,669,999"

如果僅僅是做到多語言自動格式化數字，顯然還不夠細膩。通過 .toLocaleString() 方法的 options 參數，可以做到轉化至相應語言的貨幣格式。

在我的項目之前的實現中，多國語言的貨幣符號是通過模板渲染時讀取配置文件完成轉換的。如果使用 .toLocaleString() 展示或加工展示所有貨幣數字，則無需這一步驟：

var price = 2499; price.toLocaleString('en-IN', {style: 'currency',currency: 'INR' }); // => "? 2,499.00"

如果不想要顯示末尾的小數「.00」，只要設置一下最小分位 minimumFractionDigits 即可（默認是 2）

var price = 2499; price.toLocaleString('en-IN', {style: 'currency',currency: 'INR',minimumFractionDigits: 0 }); // => "? 2,499"

這樣一個完美的價格格式化功能就完成了。options 對象參數接收一系列樣式屬性，常用的有：

1.style：可選值為 decimal（小數）、currency（貨幣）或 percent（百分比）；
2.currency：設置為貨幣樣式時使用的符號，支持列表在這里；
3.useGrouping：布爾值，是否顯示數字分位。

關于 locales 參數和 options 參數支持的其它屬性，例如上面使用的 minimumFractionDigits，可以查閱 MDN

所有現代瀏覽器都支持 locales 參數，因此在移動端使用是安全無痛的。桌面端的支持則是 IE11 及以上。

另外，如果想在后端直接對不同頁面直接輸出對應的貨幣符或者做分位轉換等操作，只要用 node.js 做一個轉換就行了。

參考： https://www.cnblogs.com/276815076/p/10028391.html

以上是生活随笔為你收集整理的使用 .toLocaleString() 轻松实现多国语言价格数字格式化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。