【JavaScript 教程】第二章基础知识04—JavaScript Number

电玩女神 2022-09-16 11:13 179阅读 0赞

![e64a3e03f9299cdd00e3130dd374444f.png][]

英文 | https://www.javascripttutorial.net/

译文 | 杨小爱

在上节中，我们学习了JavaScript的数据类型，错过的小伙伴可以点击文章《[【JavaScript 教程】第二章基础知识03—JavaScript 数据类型][JavaScript _03_JavaScript]

那么，在今天的教程中，我们将一起来学习了解 JavaScript Number类型及其有效处理数字的有用方法。

## **JavaScript 数字类型介绍** ##

除了原始数字类型，JavaScript 还为数值提供了 Number 引用类型。

要创建 Number 对象，请使用 Number 构造函数并传入一个数字值，如下所示：

var numberObject = new Number(100);

本示例定义了一个数值为 100 的 numberObject。

要从 Number 对象中获取原始值，请使用 valueOf() 方法，如下所示：

console.log(numberObject.valueOf()); // 100

要以字符串形式获取数字值，请使用 toString() 或 toLocaleString() 方法。

toString() 方法接受一个可选参数，该参数确定显示数字的基数。基数（或基数）是表示位置数字系统中数字的唯一数字的数量。

例如，十进制系统使用从 0 到 9 的十位数字，因此基数为 10。

请参阅以下示例：

var aNumber = new Number(10);
    console.log(aNumber.toString()); // "10"

在此示例中，aNumber 的原始值为 10，因此，toString() 方法在十进制系统中返回 10。

但是，以下示例返回 aNumber 变量的二进制形式。

console.log(aNumber.toString(2)); // "1010"

如果对原始数值调用方法，JavaScript 会暂时将其转换为 Number 对象。这个特性在 JavaScript 中称为原始包装器类型。例如：

let x = 10;
    console.log(x.toString(16)); // "a"

**格式化数字**

要使用指定数量的小数点格式化数字，请使用 toFixed() 方法。

toFixed() 方法接受一个参数，该参数指示应使用多少个小数点。

numberObject.toFixed(decimalPlaces);

toFixed() 方法使用定点表示法返回数字的相应字符串。这是一个例子。

var distance = 19.006
    console.log(distance.toFixed(2)); // 19.01
    
    
    distance = 19.004;
    console.log(distance.toFixed(2)); // 19.00

需要注意的是，Web 浏览器可能会以不同的方式使用舍入方法。因此，在使用 toFixed() 方法时应该小心，尤其是对于处理货币价值的应用程序。

要以电子表示法格式化数字，请使用 toExponential() 方法，如下例所示。

var x = 10, y = 100, z = 1000;
    
    
    console.log(x.toExponential());
    console.log(y.toExponential());
    console.log(z.toExponential());
    
    
    // "1e+1"
    // "1e+2"
    // "1e+3"

要获得指定精度的数字对象的字符串表示形式，请使用 toPrecision() 方法。

numberObject.toPrecision(precision);

precision 参数确定有效位数。

toPrecision() 方法以指数表示法或四舍五入到精度有效数字的定点返回 Number 对象的字符串表示形式。

请注意，如果省略 precision 参数，则 toPrecision() 方法的行为将类似于 toString() 方法。请参阅以下示例：

let x = 9.12345;
    console.log(x.toPrecision());    // '9.12345'
    console.log(x.toPrecision(4));   // '9.123'
    console.log(x.toPrecision(3));   // '9.12'
    console.log(x.toPrecision(2));   // '9.1'
    console.log(x.toPrecision(1));   // '9'

在某些情况下可能会返回电子注释，例如：

x = 123.5;
    console.log(x.toPrecision(2)); // "1.2e+2"

**JavaScript 数字对象与原始数字**

下表说明了 Number 对象和原始数字之间的区别：

![ed2d125f16414fc5994388492ae4764f.png][]

以下是示例：

let numberObject = new Number(10);
    let number = 10;
    
    
    // typeof
    console.log(typeof numberObject);
    console.log(typeof number);
    // instanceof
    console.log(numberObject instanceof Number); // true
    console.log(number instanceof Number); // false

**总结**

在本教程中，我们学习并了解了Number格式化数字的类型和一些有用的方法。下节教程中，我们将学习Boolean类型。

最后，感谢您的阅读，敬请关注。

**推荐阅读**

[【JavaScript 教程】第二章基础知识03—JavaScript 数据类型][JavaScript _03_JavaScript]

[【JavaScript 教程】第二章基础知识02—JavaScript 变量][JavaScript _03_JavaScript]

[【JavaScript 教程】第二章基础知识01—JavaScript 语法][JavaScript _03_JavaScript]

[【JavaScript 教程】第一章入门03— Hello World 示例][JavaScript _03_ Hello World]

[【JavaScript 教程】第一章入门02—JavaScript 代码编辑器及网页开发工具][JavaScript _02_JavaScript]

[【JavaScript 教程】第一章入门01—认识JavaScript][JavaScript _01_JavaScript]

#  #

**学习更多技能**

**请点击下方公众号**

![13b0ad3832428af01b70301bd4482b7c.gif][]

![fd2810e64e262d19aff1dcb7a94abd78.png][]

![cfd381d9efd68810fda2f6e8008fb41c.png][]

[e64a3e03f9299cdd00e3130dd374444f.png]: /images/20220828/687dbcfa8c104132bde23420876bad47.png
[JavaScript _03_JavaScript]: https://blog.csdn.net/snsHL9db69ccu1aIKl9r/article/details/120714579
[ed2d125f16414fc5994388492ae4764f.png]: /images/20220828/ef76747b685949dab218cb87151d311c.png
[JavaScript _03_ Hello World]: https://blog.csdn.net/weixin_43106777/article/details/102609372
[JavaScript _02_JavaScript]: https://blog.csdn.net/qq_28849581/article/details/111604130
[JavaScript _01_JavaScript]: https://blog.csdn.net/m0_56344602/article/details/119086715
[13b0ad3832428af01b70301bd4482b7c.gif]: /images/20220828/85faa4d4a3064e33a8a65ba7809fda04.png
[fd2810e64e262d19aff1dcb7a94abd78.png]: /images/20220828/9af05e0057f84826b9748c662d48888e.png
[cfd381d9efd68810fda2f6e8008fb41c.png]: /images/20220828/a8a6549d37804299a978d90c4cd34c09.png