JS数字转字符串的3种方式

在JavaScript中，将数字转换为字符串有多种方法，本文主要介绍`String()`、`toString()`和模板字面量这三种常用方式。`String()`函数作为全局方法，可安全处理`null`和`undefined`，而`toString()`方法则允许进行进制转换，但不适用于`null`和`undefined`。模板字面量语法简洁，提高代码可读性，但隐式转换可能导致意图不明确。此外，文章还探讨了浮点数精度问题，以及如何使用`toFixed`、`toPrecision`和`toExponential`控制格式，并说明了`NaN`和`Infinity`在转换时会分别变为`"NaN"`和`"Infinity"`字符串。掌握这些方法，能有效处理JS中的数字转字符串场景，提升代码质量。

答案：JavaScript中数字转字符串常用String()、toString()、模板字面量和空字符串拼接；String()可处理null/undefined更安全，toString()支持进制转换但不适用null/undefined，模板字面量可读性好，隐式转换意图不明确；浮点数精度问题可用toFixed/toPrecision/toExponential控制格式，NaN和Infinity会转为对应字符串。

在JavaScript里，把数字变成字符串，其实有几种很直接的方式，最常用也最推荐的，无非就是String()构造函数、数字自带的toString()方法，或者现代JS里很方便的模板字面量。它们各有各的脾气和适用场景，但殊途同归，都能达到目的。

解决方案

要将JavaScript中的数字转换为字符串，你可以采用以下几种主要方法：

1. 使用 String() 全局函数： 这是最通用、最安全的方法之一。它能处理任何类型的值，包括 null 和 undefined，并将其转换为对应的字符串表示。

   let num1 = 123;
   let str1 = String(num1); // "123"
   
   let num2 = 3.14;
   let str2 = String(num2); // "3.14"
   
   let num3 = -50;
   let str3 = String(num3); // "-50"
   
   let num4 = NaN;
   let str4 = String(num4); // "NaN"
   
   let num5 = Infinity;
   let str5 = String(num5); // "Infinity"

2. 使用数字的 toString() 方法： 所有数字类型的值都继承了 toString() 方法。这个方法还可以接受一个可选的参数，用于指定转换的基数（例如，转换为二进制、八进制或十六进制）。

   let numA = 456;
   let strA = numA.toString(); // "456"
   
   let numB = 10;
   let strB_binary = numB.toString(2);  // "1010" (二进制)
   let strB_octal = numB.toString(8);   // "12" (八进制)
   let strB_hex = numB.toString(16);    // "a" (十六进制)
   
   let numC = 7.89;
   let strC = numC.toString(); // "7.89"

3. 使用模板字面量（Template Literals）： 这是ES6引入的一种更现代、更具可读性的字符串构建方式。它会自动将嵌入的表达式转换为字符串。

   let numX = 789;
   let strX = `${numX}`; // "789"
   
   let numY = 12.34;
   let strY = `Value: ${numY}`; // "Value: 12.34"

4. 通过与空字符串拼接进行隐式转换： 这是一种常见的“小技巧”，利用JavaScript的类型强制转换机制。当数字与字符串（哪怕是空字符串）相加时，数字会被自动转换为字符串。

   let numP = 99;
   let strP = numP + ''; // "99"
   
   let numQ = 0.01;
   let strQ = '' + numQ; // "0.01"

toString()与String()函数在转换数字时有什么区别？

说真的，在处理纯粹的数字类型时，toString() 和 String() 函数在结果上通常是等价的，都能把数字变成它对应的字符串形式。但它们骨子里还是有不小的差异，这些差异在处理非数字类型，或者更严谨地说，处理那些“可能不是数字”的值时，就显得尤为重要了。

首先，toString() 是一个方法，它挂载在每个 JavaScript 对象的原型链上。这意味着你必须有一个实际的值（一个对象实例，包括基本类型值在它们被“装箱”成对象时），才能调用它的 toString() 方法。所以，你不能直接对 null 或 undefined 调用 toString()，因为它们不是对象，会直接抛出 TypeError。比如，null.toString() 或者 undefined.toString() 都会报错。这在实际开发中，如果你不确定变量是否为 null 或 undefined，直接用 toString() 可能会导致程序崩溃。

而 String() 则是一个全局函数，或者说是一个构造函数。它更像一个类型转换器，可以接受任何类型的值作为参数，并将其转换为字符串。它的优势在于“鲁棒性”——无论你传入的是数字、布尔值、对象、数组，甚至是 null 或 undefined，它都能稳稳地返回一个字符串。String(null) 会得到 "null"，String(undefined) 会得到 "undefined"，这在很多场景下避免了不必要的错误处理。

所以，我的经验是，如果你确定你处理的就是一个数字，或者你已经提前做了非空判断，那么 toString() 用起来很自然。但如果你面对的是一个可能来自各种数据源、类型不确定的变量，或者你希望代码更健壮，那么 String() 函数就是更安全的选择。它就像一个万能适配器，总能给你一个预期的字符串结果，而不会因为类型问题而中断。

为什么在特定场景下，隐式转换（如与空字符串拼接）可能不是最佳选择？

隐式转换，尤其是那种 num + '' 或者 '' + num 的写法，确实很简洁，在很多老代码或者快速原型开发中随处可见。它利用了JavaScript弱类型语言的特性，当数字遇到字符串进行加法运算时，JavaScript引擎会“聪明地”把数字也变成字符串，然后进行字符串拼接。这种“聪明”有时候也挺让人头疼的。

我觉得它最大的问题在于意图不明确。当你看到 num + '' 时，一眼扫过去，你可能需要稍微停顿一下，才能反应过来这实际上是在做类型转换，而不是一个数学加法操作。这对于代码的阅读者来说，无疑增加了一点点认知负担。在一个大型项目或者团队协作的环境里，这种模糊性可能会导致误解，甚至引发潜在的bug，尤其是在复杂的表达式中，这种隐式转换可能会与其他操作符的优先级或类型推断规则产生意想不到的交互。

再者，虽然在现代JavaScript引擎中，这种隐式转换的性能开销通常可以忽略不计，但在极端性能敏感的场景下，或者在老旧的浏览器环境中，直接调用 String() 或 toString() 可能会有微小的性能优势，因为它们是明确的类型转换操作，引擎可以更快地优化。当然，这通常不是我们日常开发中需要过分关注的重点。

我个人更倾向于使用 String(num) 或 num.toString()。它们就像一个明确的信号，告诉读代码的人：“嘿，我这里就是要进行一个类型转换！”这种显式的表达方式，能让代码逻辑更清晰，也更容易维护。毕竟，代码是写给人看的，其次才是机器执行的。

如何处理数字转换字符串时可能遇到的精度问题或特殊数值（NaN, Infinity）？

在JavaScript中，数字转换成字符串，尤其是涉及到浮点数或者一些特殊数值时，确实有一些细节值得我们留意。

浮点数精度问题： JavaScript的数字类型是双精度浮点数（IEEE 754标准），这决定了它在处理小数时，可能会存在精度问题，比如 0.1 + 0.2 不等于 0.3。当这些带有“不精确”尾巴的浮点数被转换为字符串时，默认的 toString() 或 String() 方法会尽可能地保留其内部表示的完整性。这意味着你可能会看到 0.1 + 0.2 转换成 "0.30000000000000004" 这样的字符串。

如果你的需求是控制小数位数或者以科学计数法表示，那么数字原型上的一些方法就派上用场了：

• toFixed(digits)：将数字格式化为指定小数位数的字符串。它会进行四舍五入。

  let price = 19.998;
  console.log(price.toFixed(2)); // "20.00"
  let smallNum = 0.000000123;
  console.log(smallNum.toFixed(8)); // "0.00000012"

• toPrecision(precision)：根据指定的总位数（包括整数部分和小数部分）返回一个字符串。如果数字太大或太小，它可能会返回科学计数法。

  let bigNum = 12345.6789;
  console.log(bigNum.toPrecision(5)); // "12346"
  console.log(bigNum.toPrecision(8)); // "12345.679"

• toExponential(fractionDigits)：将数字转换为指数表示法（科学计数法）的字符串，并指定小数部分的位数。

  let distance = 987654321;
  console.log(distance.toExponential(2)); // "9.88e+8"

  选择哪种方法，完全取决于你希望数字以何种格式呈现。

特殊数值 NaN 和 Infinity： JavaScript中有两个特殊的数字值：NaN（Not a Number，非数字）和 Infinity（无穷大）。当它们被转换为字符串时，行为是相当直接和可预测的：

• NaN 会被转换为字符串 "NaN"。

  let result = 0 / 0; // NaN
  console.log(String(result));    // "NaN"
  console.log(result.toString()); // "NaN"

• Infinity（包括 -Infinity）会被转换为字符串 "Infinity"（或 "-Infinity"）。

  let positiveInf = 1 / 0; // Infinity
  let negativeInf = -1 / 0; // -Infinity
  console.log(String(positiveInf)); // "Infinity"
  console.log(String(negativeInf)); // "-Infinity"

  这两种特殊情况，无论是用 String() 还是 toString()，结果都是一致且符合预期的。在实际应用中，如果你需要对这些特殊数值进行额外的处理（比如显示为“无效数据”或“超出范围”），通常会在转换前使用 isNaN() 或 Number.isFinite() 等函数进行判断。这能帮助你更好地控制用户界面的显示逻辑，避免直接将 NaN 或 Infinity 暴露给用户。

好了，本文到此结束，带大家了解了《JS数字转字符串的3种方式》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！