66 - 内置对象 - Number 对象 - 数值的格式化与转换

前端 - Javascript 《内置对象 - Number 对象 - 数值的格式化与转换》

在前端开发中，JavaScript 的 Number 对象为我们处理数值提供了强大的功能，特别是数值的格式化与转换。今天，就让我们一起探索这些有趣又实用的操作。

数值转换

1. 字符串转数字

在实际开发中，我们经常会遇到从表单等地方获取到的字符串类型的数值，需要将其转换为数字类型。JavaScript 提供了几种方法来实现这一目的。

Number() 函数

let str = "123";
let num = Number(str);
console.log(num); // 输出: 123

不过，如果字符串包含非数字字符，Number() 会返回 NaN（Not a Number）。

let str2 = "abc";
let num2 = Number(str2);
console.log(num2); // 输出: NaN

parseInt() 和 parseFloat()

parseInt() 用于将字符串转换为整数，parseFloat() 用于转换为浮点数。

let str3 = "3.14";
let intNum = parseInt(str3);
let floatNum = parseFloat(str3);
console.log(intNum); // 输出: 3
console.log(floatNum); // 输出: 3.14

parseInt() 还可以指定第二个参数，表示进制。

let hexStr = "FF";
let decimalNum = parseInt(hexStr, 16);
console.log(decimalNum); // 输出: 255

2. 数字转字符串

使用 toString() 方法可以将数字转换为字符串。

let num3 = 123;
let str4 = num3.toString();
console.log(typeof str4); // 输出: string

数值格式化

1. 保留小数位数

toFixed() 方法可以将数字保留指定的小数位数，并返回一个字符串。

let num4 = 3.14159;
let fixedNum = num4.toFixed(2);
console.log(fixedNum); // 输出: 3.14

2. 科学计数法

toExponential() 方法用于将数字转换为科学计数法表示的字符串。

let num5 = 1230000;
let expNum = num5.toExponential(2);
console.log(expNum); // 输出: 1.23e+6

3. 特定格式

toLocaleString() 方法可以根据本地环境对数字进行格式化。

let num6 = 1234567.89;
let localNum = num6.toLocaleString();
console.log(localNum); 
// 在中文环境下输出: 1,234,567.89

总结表格

通过这些方法，我们可以轻松地对数值进行格式化和转换，满足前端开发中各种不同的需求。无论是处理用户输入的数据，还是展示美观的数值信息，JavaScript 的 Number 对象都能大显身手。