JS数字转字符串的三种常用方法：toString、String与拼接

图 0：JavaScript 数字转字符串的三大主路径示意

一、方法一：Number.prototype.toString() 原型方法

toString() 是定义在 Number.prototype 上的实例方法。当我们在一个数字变量上调用该方法时，JavaScript 引擎会将其转换为十进制表示的字符串形式，或者按照指定的进制基数进行转换。

1. 基础调用与语法规范

对于变量或常规表达式，直接在其后添加 .toString() 即可：

const count = 255;
const strCount = count.toString();

console.log(strCount);        // 示例输出: "255"
console.log(typeof strCount); // 示例输出: "string"

要安全地在字面量上直接调用 toString()，可以使用以下四种规范写法之一：

// 推荐方式 1：用括号包裹数字字面量（语义最清晰）
(123).toString();   // "123"

// 方式 2：使用双点号（第一个点表示小数0，第二个点为属性访问）
123..toString();    // "123"

// 方式 3：点号前加空格
123 .toString();    // "123"

// 方式 4：预先赋值给变量
const num = 123;
num.toString();     // "123"

2. 支持基数转换（Radix）

toString() 相比其他两种方法最大的特色，在于它接受一个可选的基数参数 radix（范围为 2 到 36）。如果不提供此参数，默认以十进制（10）输出。通过指定 radix，可以快速实现二进制、八进制、十六进制等转换：

const value = 255;

console.log(value.toString(2));  // 示例输出: "11111111" (二进制)
console.log(value.toString(8));  // 示例输出: "377"      (八进制)
console.log(value.toString(16)); // 示例输出: "ff"       (十六进制)
console.log(value.toString(36)); // 示例输出: "73"       (36进制，包含0-9和a-z)

图 1：toString() 的词法避坑流程与基数参数转换分支

二、方法二：全局 String() 转换函数

String() 是 ECMAScript 规范中内置的全局构造函数兼类型转换器。当不使用 new 关键字，仅将其作为普通函数调用时（例如 String(num)），它会对其参数执行 ECMAScript 内部抽象操作 ToString(argument)，将任何值安全转换为基本字符串类型。

1. 语法与典型用法

const count = 404;
const str1 = String(count);         // "404"
const str2 = String(3.1415926);     // "3.1415926"
const str3 = String(-0);           // "0"
const str4 = String(NaN);          // "NaN"
const str5 = String(Infinity);     // "Infinity"

2. 最大优势：空值安全性（Null-Safety）

在实际业务开发中，数据源（例如 API 返回体或表单状态）往往可能包含未定义或空值。如果在 null 或 undefined 上直接调用 toString()，会直接引发运行期致命异常：

let unknownValue = null;

// 错误做法：抛出 TypeError: Cannot read properties of null (reading 'toString')
// unknownValue.toString();

// 安全做法：全局 String() 能够安全容错
console.log(String(unknownValue)); // 示例输出: "null"

unknownValue = undefined;
console.log(String(unknownValue)); // 示例输出: "undefined"

图 2：String() 底层抽象机制与 new String() 内存模型差异

三、方法三：字符串拼接与模板字面量

在 JavaScript 中，加号运算符（+）具有双重身份：当两个操作数都为数值时执行数学加法；但只要其中一个操作数为字符串，JavaScript 就会触发隐式类型转换，将另一个操作数转换为字符串并进行首尾拼接。此外，ES6 引入的模板字面量（Template Literals）也是基于此转换机制的现代语法糖。

1. 核心写法

const port = 8080;

// 语法形式 1：空字符串拼接 (隐式转换)
const strA = port + "";        // "8080"
const strB = "" + port;        // "8080"

// 语法形式 2：ES6 模板字面量 (最利于阅读和嵌入句子)
const strC = `${port}`;        // "8080"
const url  = `http://localhost:${port}/api`; // "http://localhost:8080/api"

2. 隐式转换的核心陷阱：运算符结合性与优先级

加号运算符遵循自左向右的结合律（Left-to-Right Associativity）。当表达式中混合了多个数值运算与字符串拼接时，拼接发生的时机会直接改变运算结果：

// 案例 A：数值先相加，再转字符串
const resA = 10 + 20 + "";
console.log(resA); // 示例输出: "30"
// 过程解析: (10 + 20) -> 30; 30 + "" -> "30"

// 案例 B：空字符串在前，导致后续全部变为连续字符拼接！
const resB = "" + 10 + 20;
console.log(resB); // 示例输出: "1020"
// 过程解析: ("" + 10) -> "10"; "10" + 20 -> "1020"

图 3：隐式拼接的结合性与执行顺序分步图

四、三种方法的横向对比与选型决策指南

为了在实际工程中做出恰当的技术选择，下表从语法规范、进制支持、特殊值容错、可读性等多个维度对三种方式进行了横向对比：

图 4：业务开发中的数字转字符串选型决策树

五、工程实践建议

综合实际开发规范，给出以下三条关键工程建议：

• 防御性编程优先使用 String()：在处理后端接口返回值、URL 查询参数或可能为空的变量时，优先采用 String(value)。它可以避免因为非预期的 null 或 undefined 导致页面抛错白屏。
• 进制转换严格使用 .toString(radix)：当需要生成哈希字符串、颜色十六进制转换（如 color.toString(16).padStart(2, '0')）或二进制掩码处理时，toString(radix) 是 JavaScript 原生提供的标准工具。
• 避免混合拼接写法的隐式优先级：在包含算术表达式的上下文里，避免写出 '' + a + b 这种极具歧义的代码。如果需要文本插值，统一使用 ES6 模板字符串 `${a + b}`，既能保证可读性，又能消除计算顺序的隐患。