JavaScript Katana

如何在 JavaScript 中将数字转换为字符串：完整指南与示例

資料處理（字串、數值、日期、陣列、物件）
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. 介绍

JavaScript 是 Web 开发中极其重要的编程语言。尤其是类型转换在许多场景中扮演关键角色，例如验证表单输入和格式化 API 响应。
本文将详细说明在 JavaScript 中如何将数字转换为字符串，涵盖从基础用法到高级技巧的全部内容。

阅读本文后，即使是初学者也能理解如何将数字转换为字符串，并在实际开发中有效地运用这些技术。

2. JavaScript 中将数字转换为字符串的基本方法

JavaScript 提供了多种将数字转换为字符串的方式。本节将介绍三种最常用的方法。

2.1 使用 String() 函数

将数字转换为字符串的最简单方式是使用内置的 String() 函数。

使用示例

let num = 123;
let str = String(num);
console.log(typeof str); // "string"

说明

  • 只需写 String(number)，即可将数值转换为字符串。
  • 原始数字不会被修改，而是返回一个新的字符串值。

优点与注意事项

  • 代码简洁，易读性高。
  • 数据类型明确保证，降低出错概率。
  • 但它不支持去除空白或进行特殊格式化。

2.2 使用 toString() 方法

toString() 方法是 JavaScript 数字对象的内置方法，能够实现更灵活的转换。

使用示例

let num = 456;
let str = num.toString();
console.log(str); // "456"

说明

  • 由于它是数字对象的方法，可以直接在数值上调用。
  • 还支持转换为不同的进制系统，例如二进制或十六进制。

指定基数的示例

let num = 255;
let binaryStr = num.toString(2); // binary
console.log(binaryStr); // "11111111"

优点与注意事项

  • 通过指定基数，可以在改变进制的同时将数字转换为字符串。
  • 当值为 undefined 或 null 时会抛出错误，因此需要事先进行类型检查。

2.3 使用模板字面量

在现代 JavaScript 中，模板字面量（反引号）提供了一种简洁直观的数字转字符串方式。

使用示例

let num = 789;
let str = `${num}`;
console.log(str); // "789"

说明

  • 模板字面量使字符串转换直观易懂。
  • 可以轻松与其他字符串拼接，实现灵活的格式化。

优点与注意事项

  • 语法简洁，视觉上易于理解。
  • 支持复杂的格式化，包括表达式。
  • 模板字面量从 ES6 开始支持，需注意旧版浏览器的兼容性。

3. 高级主题：转换与格式化特殊数值

本节探讨在 JavaScript 中将数字转换为字符串的高级技巧。尤其是处理小数以及指定输出格式，在实际开发中经常会用到。

3.1 处理小数与格式指定

在将包含小数点的数字转换为字符串时，可以使用能够控制显示格式的方法。

1. 使用 toFixed() 方法

toFixed() 方法在指定小数位数的同时生成字符串。

使用示例
let num = 123.456;
let str = num.toFixed(2);
console.log(str); // "123.46"

说明

  • 根据传入的参数，将数值四舍五入到指定的小数位数。
  • 返回值本身就是字符串，无需额外转换。

优点与注意事项

  • 值可能会被四舍五入得比预期更多，因此在精度关键时可能需要额外处理。
  • 如果未指定参数，默认保留零位小数。

实际示例：货币显示

let price = 1234.5;
let formattedPrice = "$" + price.toFixed(2);
console.log(formattedPrice); // "$1234.50"

2. 使用 toPrecision() 方法

toPrecision() 方法通过指定有效数字的总位数生成字符串。

使用示例
let num = 123.456;
let str = num.toPrecision(4);
console.log(str); // "123.5"

说明

  • 通过指定有效数字的位数，四舍五入和格式化会同时进行。

优势与注意事项

  • 结果可能会以指数表示形式显示，在需要固定格式时可能不适用。

3.2 将数值转换为货币和百分比格式

在展示数据时，通常需要将数值格式化为货币或百分比。

1. 使用 Intl.NumberFormat 进行货币格式化

Intl.NumberFormat 对象可以轻松地将数字格式化为货币。

使用示例
let price = 1234567.89;
let formatted = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(price);
console.log(formatted); // "￥1,234,568"

说明

  • 通过指定地区（locale）和货币代码，数字会自动正确格式化。
  • 千位分隔符会自动添加，免去手动处理的需求。

实际示例：格式化为美元

let usdPrice = 1234.56;
let formattedUSD = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(usdPrice);
console.log(formattedUSD); // "$1,234.56"

2. 转换为百分比格式

以下示例演示了如何轻松地将数字格式化为百分比。

使用示例
let rate = 0.1234;
let percent = new Intl.NumberFormat('en-US', { style: 'percent', minimumFractionDigits: 2 }).format(rate);
console.log(percent); // "12.34%"

说明

  • 小数值会被转换为百分比表示，并可控制小数位数。

4. 将数字和字符串相互转换时的重要注意事项与错误处理

虽然 JavaScript 让数字与字符串之间的相互转换变得容易，但在某些情况下仍可能出现错误或意外行为。本节介绍关键注意事项以及错误处理的实际示例。

4.1 检测与处理 NaN（非数字）

在 JavaScript 中，NaN（非数字）在数值运算或转换失败时出现。让我们回顾如何正确检测和处理它。

1. 基本 NaN 检测

示例：生成 NaN
let result = "abc" * 2; // Invalid operation
console.log(result); // NaN

如上所示，字符串与数字之间的运算无效，导致 NaN。

示例：使用 isNaN()
let value = "abc" * 2;
console.log(isNaN(value)); // true

2. 使用 Number.isNaN()

在 ES6 中，引入了 Number.isNaN() 以实现更精确的检测。

示例：严格检测
console.log(isNaN("123"));          // false (due to type coercion)
console.log(Number.isNaN("123"));   // false (no type coercion)

关键要点

  • isNaN() 会进行类型强制转换，可能导致意外结果。
  • Number.isNaN() 不进行类型强制转换，更加可靠。

4.2 防止类型转换错误的技巧

1. 安全类型检查示例

为防止因数字与字符串混用而导致的意外错误，可提前进行类型检查。

示例：在处理前检查类型
let value = "123";

if (typeof value === "number") {
  console.log(value.toString());
} else if (!isNaN(value)) {
  console.log(String(Number(value)));
} else {
  console.log("Invalid input value");
}

Explanation

  • By checking the data type in advance and handling invalid values, overall safety is improved.

2. Setting Default Values

Setting default values is also an effective strategy when invalid input is provided.

Example: Applying a Default Value
function safeConvert(value) {
  return isNaN(value) ? "0" : String(value);
}

console.log(safeConvert("123")); // "123"
console.log(safeConvert("abc")); // "0"

Key Points

  • By using isNaN() , processing can continue safely with a default value when errors occur.

4.3 Handling Floating-Point Precision Errors

JavaScript floating-point calculations can produce precision errors. Let’s review how to mitigate them.

1. Example of a Precision Error

let result = 0.1 + 0.2;
console.log(result); // 0.30000000000000004

2. Methods to Eliminate Precision Errors

Method 1: Using toFixed()
let result = (0.1 + 0.2).toFixed(2);
console.log(result); // "0.30"
Method 2: Using Integer Arithmetic
let result = (0.1 * 10 + 0.2 * 10) / 10;
console.log(result); // 0.3

Key Points

  • Floating-point arithmetic can introduce errors, so countermeasures are necessary.
  • For financial calculations or precision-critical logic, integer arithmetic is recommended.

5. FAQ: Frequently Asked Questions and Troubleshooting

When converting numbers to strings in JavaScript, developers from beginners to intermediate levels often encounter various questions and issues. This section introduces common questions and their solutions.

5.1 How can I verify that a number has been converted into a string?

Question:
I want to confirm whether a number has been successfully converted into a string. Is there a simple way to check?

Answer:
You can verify the conversion by checking the data type of the result.

Example: Using the typeof Operator

let num = 123;
let str = String(num);
console.log(typeof str); // "string"

Key Points:

  • The typeof operator returns the type of a variable as a string.
  • To check whether a value is a number, use typeof num === “number” .

5.2 Why do errors occur when converting numbers?

Question:
An error occurred during code execution. What could be the cause?

Answer:
Errors may occur when the value being converted is undefined or null.

Example: Handling undefined and null Safely

let value = null;

// Convert safely
let str = value !== null && value !== undefined ? String(value) : "Default value";
console.log(str); // "Default value"

Key Points:

  • Checking for value existence in advance helps prevent errors.
  • Setting a default value improves the stability of your code.

5.3 Why does the converted string not match the expected format?

Question:
After converting a number to a string, the number of decimal places or format is not what I expected. What should I do?

Answer:
Use toFixed() or Intl.NumberFormat to explicitly specify the format.

Example 1: Fixing Decimal Places

let num = 123.456;
let str = num.toFixed(2);
console.log(str); // "123.46"

Example 2: Adding Thousand Separators or Currency Symbols

let price = 1234567.89;
let formatted = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(price);
console.log(formatted); // "￥1,234,568"

Key Points:

  • Select the appropriate method to control numeric display formats.
  • International formatting should be considered when necessary.

5.4 How should I handle accidental conversion of non-numeric strings?

问题：
字符串被错误地当作数字处理，导致错误。如何防止错误的转换？

答案：
提前验证输入数据，并确认其为数值后再进行转换。

示例：结合验证与转换

let input = "abc"; // User input

if (!isNaN(input)) {
  let str = String(Number(input));
  console.log(str);
} else {
  console.log("Invalid input value.");
}

关键要点：

  • 将输入验证与错误处理相结合，有助于防止无效数据的处理。
  • 处理用户输入时需要格外小心。

5.5 如何保持浮点数精度？

问题：
我想解决 0.1 + 0.2 结果为 0.30000000000000004 的问题。

答案：
由于浮点运算会产生精度误差，使用整数运算或固定小数位格式化。

示例 1：使用整数运算

let result = (0.1 * 10 + 0.2 * 10) / 10;
console.log(result); // 0.3

示例 2：修正小数位

let result = (0.1 + 0.2).toFixed(2);
console.log(result); // "0.30"

关键要点：

  • 浮点计算可能产生误差，因此需要预防措施。
  • 将计算数据与显示数据分离，可提升安全性和准确性。

6. 总结与相关资源

本文全面阐述了在 JavaScript 中将数字转换为字符串的方法，涵盖了基础方法、进阶技巧、重要注意事项以及常见问答。让我们回顾关键要点。

6.1 关键要点概述

1. 基础转换方法

  • String() 函数：简单且适合初学者。
  • toString() 方法：灵活，支持基数和数字系统的转换。
  • 模板字面量：现代语法，提供清晰且易用的方式。

2. 高级格式化与显示控制

  • toFixed()：控制小数位数。
  • Intl.NumberFormat：简化货币和百分比的格式化。

3. 错误处理与最佳实践

  • NaN 检测：使用 isNaN() 和 Number.isNaN() 防止错误。
  • 安全类型转换：在处理前验证数据类型。
  • 浮点精度处理：使用整数运算或固定小数位控制。

4. 基于 FAQ 的故障排查

  • 针对输入错误和格式化问题的实用解决方案。
  • 真实代码示例，提升故障排查能力。

6.2 实际使用案例

本文介绍的技术可应用于以下场景：

  • 电子商务价格显示：使用货币格式提升可读性。
  • 数据可视化工具：对数值进行单位或百分比格式化。
  • 表单输入验证：验证并安全处理用户输入。
  • 日志记录与调试：将数值转换为字符串，以获得清晰的输出。

6.3 相关链接与参考资料

想要深入了解或查阅官方文档的读者，可参考以下资源：

6.4 最后说明

在 JavaScript 中将数字转换为字符串是贯穿整个 Web 应用的基础技能。

通过本文获得的技能：

  • 理解基础类型转换技术。
  • 为不同场景适当地格式化数值数据。
  • 编写稳定且抗错误的代码。

使用这些技术，构建实用且可靠的 Web 应用。

附加说明与未来学习

为了进一步提升您的 JavaScript 技能，建议学习字符串到数字的逆向转换以及更高级的数据类型操作技巧。这些主题将在未来的文章中进行介绍，敬请期待！

広告