Heim > Web-Frontend > js-Tutorial > Hauptteil

Detailliertes Beispiel für die Verwendung von toLocaleString zum Formatieren von Zahlen in JavaScript

WBOY
Freigeben: 2022-08-29 20:06:02
nach vorne
2332 Leute haben es durchsucht

Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript. Er führt Sie hauptsächlich in die detaillierte Erklärung der digitalen Formatierung mit toLocaleString in JavaScript ein. Ich hoffe, dass er hilfreich ist.

Detailliertes Beispiel für die Verwendung von toLocaleString zum Formatieren von Zahlen in JavaScript

[Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend]

toLocaleString

Das Problem der Formatierung von Zahlen in Projekten tritt zu häufig auf, insbesondere wenn es um Finanzzahlen geht. Dieses Mal gibt es ein Problem Eine Anforderung, die in verschiedenen Formaten verarbeitet werden muss. Früher hätte ich vielleicht dummerweise meine eigene Funktion geschrieben, um damit umzugehen, aber dieses Mal habe ich zufällig gesehen, dass es eine so nützliche Funktion gibt, dann wäre das nicht eine reine Ungerechtigkeit vorher - _-

Number.prototype.toLocaleString()

Parameter: numObj.toLocaleString([locales [, Optionen]]).

Der erste Parameter ist ein optionaler Parameter, eine Zeichenfolge mit abgekürztem Sprachcode (BCP 47-Sprach-Tag, zum Beispiel: cmn-Hans-CN) oder ein Array dieser Zeichenfolgen. Siehe auch MDN Details: Wenn es spezielle regionale Formate gibt, müssen Sie die lokalen locales übergeben. Im Allgemeinen kann die Übergabe des Werts undefined, zh oder en die meisten Situationen bewältigen. Der Standardwert ist undefiend . locales。一般传值undefinedzh或者en,就可以应对大多数情况了,默认不传是undefiend

1. 数字分割成千分位

它直接调用,默认就是分割千分位的

var a = 123456.6789
a.toLocaleString() // 123,456.679,默认保留3位小数
Nach dem Login kopieren

如果不想被分给成千分位,则需要用到一个属性useGrouping: false

var a = 123456.6789
a.toLocaleString(undefined, {useGrouping: false}) // 123456.6789
Nach dem Login kopieren

2. 保留几位小数

这里主要用到了两个属性: 保留最少小数minimumFractionDigits和保留最多小数maximumFractionDigits

var a = 123456.6789
a.toLocaleString(undefined, {minimumFractionDigits: 6}) //123,456.678900
Nach dem Login kopieren

这里把最少保留数设为6,那它就会保留6位小数

var a = 123456.6789
a.toLocaleString(undefined, {maximumFractionDigits: 2}) //123,456.68
Nach dem Login kopieren

如果想保留两位小数的话,把保留最多小数设为2就行。

3. 使用的整数数字的最小数目minimumIntegerDigits

范围是1-21,默认1

var a = 123456.6789
a.toLocaleString(undefined, {minimumIntegerDigits: 8}) //00,123,456.679
Nach dem Login kopieren
Nach dem Login kopieren

使用的整数数字的最小数目,不足会补零

4. 使用的有效数字的最小数目minimumSignificantDigits

范围是1-21,默认1

var a = 123456.6789
a.toLocaleString(undefined, {minimumIntegerDigits: 8}) //00,123,456.679
Nach dem Login kopieren
Nach dem Login kopieren

5. 使用的有效数字的最大数目maximumSignificantDigits

范围是1-21,默认21

var a = 123456.6789
a.toLocaleString(undefined, {maximumSignificantDigits: 6}) //123,457
Nach dem Login kopieren

4.5两个保留有效位的属性也很厉害,可以保留任意有效位,四舍五入,不足位的会补零。

6. 展示的样式style

属性style是不同样式展示选项:默认是decimal。 选项:

decimal: 纯数字

percent: 百分比

unit: 单位格式,配合unit,单位使用。单位取值

currency: 用于货币格式,注意这个属性不能单独使用,还得配套使用currency属性

var a = 123456.6789, 
a.toLocaleString(undefined, {style: 'decimal'}) //123,456.679
a.toLocaleString(undefined, {style: 'percent'}) // 12,345,668%
a.toLocaleString(undefined, {style: 'currency', currency: 'EUR'}) // €123,456.68
a.toLocaleString(undefined, {style: 'currency', currency: 'CNY'}) // ¥123,456.68
a.toLocaleString(undefined, {style: 'unit', unit: 'acre'}) // 123,456.679英亩
Nach dem Login kopieren

其中currencycurrencyDisplay也可配套使用,前者制定对应的货币,比如 USDEURCNY (不区分大小写的),后者则是货币符号的展示样式,默认currencyDisplaysymbol:

var a = 123456.6789, 
a.toLocaleString(undefined, {style: 'currency', currency: 'CNY', currencyDisplay: 'symbol'}) //  ¥123,456.68
a.toLocaleString(undefined, {style: 'currency', currency: 'CNY', currencyDisplay: 'code'}) // CNY 123,456.68
a.toLocaleString(undefined, {style: 'currency', currency: 'CNY', currencyDisplay: 'name'}) // 123,456.68人民币
Nach dem Login kopieren

上面都是一些toLocaleString对数字的常规格式,应对日常的格式处理应该够用的。

当然它还有Date.prototype.toLocaleStringArray.prototype.toLocaleString

1. Teilen Sie Zahlen in Tausendstel

Es wird direkt aufgerufen und die Standardeinstellung ist die Division in Tausendstel

rrreeeWenn Sie nicht in Tausendstel unterteilt werden möchten, müssen Sie ein Attribut useGrouping: falserrreee

2. Wie viele Dezimalstellen beibehalten werden

Hier werden hauptsächlich zwei Attribute verwendet: Behalten Sie die minimalen Dezimalstellen beiminimumFractionDigits und Behalten Sie die meisten Dezimalstellen beimaximumFractionDigitsrrreeeSetzen Sie die minimale Anzahl der beibehaltenen Stellen auf 6, dann werden 6 Dezimalstellen beibehalten🎜rrreee🎜Wenn Sie zwei Dezimalstellen beibehalten möchten, legen Sie einfach die maximale Anzahl an Dezimalstellen fest auf 2 gehalten. 🎜

3. Die Mindestanzahl der verwendeten Ganzzahlziffern.

🎜 Der Bereich liegt zwischen 1 und 21, der Standardwert ist 1 h3>4. Die minimale Anzahl der signifikanten Ziffern (MinimumSignificantDigits)🎜Der Bereich ist 1-21, der Standardwert ist 1🎜rrree

5. Die maximale Anzahl der verwendeten signifikanten Ziffern (MaximumSignificantDigits)

🎜Der Bereich ist 1-21, der Standardwert ist 21. 🎜

6. Der angezeigte Stil

🎜Das Attribut style ist eine andere Stilanzeigeoption: Der Standardwert ist decimal. Optionen: 🎜🎜dezimal: reine Zahl 🎜🎜Prozent: Prozentsatz 🎜🎜Einheit: Einheitenformat, passende Einheit , von der Einheit verwendet. Einheitenwert🎜🎜currency: Wird im Währungsformat verwendet. Beachten Sie, dass dieses Attribut nicht alleine verwendet werden kann und in Verbindung mit dem Attribut currency verwendet werden muss🎜rrreee🎜wobei currency und currencyDisplay können auch zusammen verwendet werden. Ersteres gibt die entsprechende Währung an, z. B. USD, EUR und CNY (ohne Berücksichtigung der Groß-/Kleinschreibung), letzteres ist der Anzeigestil von Währungssymbolen. Der Standardwert ist currencyDisplay: symbol:🎜rrreee🎜Die oben genannten sind all toLocaleString Das herkömmliche Zahlenformat sollte für die tägliche Formatverarbeitung ausreichen. 🎜🎜Natürlich gibt es auch Date.prototype.toLocaleString, Array.prototype.toLocaleString. Wenn Sie interessiert sind, können Sie sich selbst darüber informieren. 🎜🎜【Verwandte Empfehlungen: 🎜Javascript-Video-Tutorial🎜, 🎜Web-Frontend🎜】🎜

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die Verwendung von toLocaleString zum Formatieren von Zahlen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:jb51.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage