Exemple détaillé d'utilisation du formatage des nombres toLocaleString en JavaScript

Cet article vous apporte des connaissances pertinentes sur javascript Il vous présente principalement l'explication détaillée du formatage numérique à l'aide de toLocaleString en JavaScript. Les amis dans le besoin pourront s'y référer.

[Recommandations associées : tutoriel vidéo javascript, front-end web]

toLocaleString

Le problème du formatage des nombres dans les projets est trop courant, surtout lorsqu'il s'agit de chiffres financiers. une demande qui doit être traitée dans différents formats. Dans le passé, j'aurais peut-être bêtement écrit ma propre fonction pour la gérer, mais cette fois, j'ai accidentellement vu qu'il existe une fonction si utile, alors ne serait-ce pas une pure injustice. avant - _-

Number.prototype.toLocaleString()

Paramètres : numObj.toLocaleString([locales [, options]]).

Le premier paramètre est un paramètre facultatif, une chaîne de code de langue abrégé (balise de langue BCP 47, par exemple : cmn-Hans-CN) ou un tableau de ces chaînes. Certaines clés d'extension Unicode sont également autorisées. détails S'il existe des formats régionaux spéciaux, vous devez transmettre les locales locaux. Généralement, passer la valeur undefined, zh ou en peut gérer la plupart des situations. La valeur par défaut est undefiend . locales。一般传值undefined，zh或者en，就可以应对大多数情况了，默认不传是undefiend。

1. 数字分割成千分位

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

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

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

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

2. 保留几位小数

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

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

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

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

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

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

 范围是1-21，默认1

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

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

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

范围是1-21，默认1

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

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

范围是1-21，默认21

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

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英亩

其中currency和currencyDisplay也可配套使用，前者制定对应的货币，比如 USD 、EUR 与 CNY （不区分大小写的），后者则是货币符号的展示样式，默认currencyDisplay：symbol:

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人民币

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

当然它还有Date.prototype.toLocaleString，Array.prototype.toLocaleString

1. Divisez les nombres en millièmes

Il est appelé directement, et la valeur par défaut est de diviser en millièmes

rrreeeSi vous ne voulez pas être divisé en millièmes, vous devez utiliser un attribut useGrouping : falserrreee

2. Combien de décimales conserver

Deux attributs sont principalement utilisés ici : conserver le minimum de décimalesminimumFractionDigits et conserver le plus de décimalesmaximumFractionDigits rrreeeRéglez le nombre minimum conservé à 6, il conservera alors 6 décimales🎜rrreee🎜Si vous souhaitez conserver deux décimales, définissez simplement le nombre maximum de décimales retenu à 2. 🎜

3. Le nombre minimum de chiffres entiers utilisés minimumIntegerDigits

🎜 La plage est de 1 à 21, la valeur par défaut est 1🎜rrreee🎜Le nombre minimum de chiffres entiers utilisés, tout manque sera comblé par des zéros🎜4. Le nombre minimum de chiffres significatifs minimumSignificantDigits🎜La plage est de 1 à 21, la valeur par défaut est 1🎜rrreee

5 Le nombre maximum de chiffres significatifs utilisés maximumSignificantDigits

🎜La plage est. 1-21, la valeur par défaut est 21🎜rrreee🎜 4.5 Les deux propriétés de conservation des chiffres valides sont également très puissantes. Vous pouvez conserver tous les chiffres valides, les arrondir et des zéros seront ajoutés s'il n'y a pas suffisamment de chiffres. 🎜

6. Le style d'affichage

🎜L'attribut style est une option d'affichage de style différente : la valeur par défaut est décimal. Options : 🎜🎜décimal : nombre pur 🎜🎜pourcentage : pourcentage 🎜🎜unité : format d'unité, correspondance avec unité , utilisé par l'unité. Valeur unitaire🎜🎜currency : utilisé au format monétaire. Notez que cet attribut ne peut pas être utilisé seul, et doit être utilisé en conjonction avec l'attribut currency🎜rrreee🎜where currency et <code>currencyDisplay peuvent également être utilisés ensemble. Le premier spécifie la devise correspondante, telle que USD, EUR et CNY (non sensible à la casse), ce dernier est le style d'affichage des symboles monétaires. La valeur par défaut est <code>currencyDisplay : symbol:🎜rrreee🎜Les éléments ci-dessus sont. all toLocaleString Le format conventionnel des nombres devrait suffire pour le traitement quotidien du format. 🎜🎜Bien sûr, il contient également Date.prototype.toLocaleString, Array.prototype.toLocaleString. Si vous êtes intéressé, vous pouvez en apprendre davantage par vous-même. 🎜🎜【Recommandations associées : 🎜tutoriel vidéo javascript🎜, 🎜front-end web🎜】🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!