${sym} 与 String(sym) 的区别

在 JavaScript 中，${sym}（模板字符串插值）和 String(sym)（显式类型转换）虽然都涉及将值转换为字符串，但它们的底层逻辑和行为存在显著差异，尤其是在处理 Symbol 等特殊类型时。以下是具体对比：

1. 隐式转换 vs. 显式转换

${sym}（模板字符串插值）：

属于 隐式转换，底层会调用值的 toString() 方法，但如果值是 Symbol 类型，JavaScript 引擎会直接抛出 TypeError，因为 Symbol 禁止隐式转换为字符串。

const sym = Symbol("key");
console.log(`${sym}`); // TypeError: Cannot convert a Symbol value to a string

String(sym)：

属于 显式转换，会安全调用值的 toString() 方法。对于 Symbol，会返回 Symbol(key) 格式的字符串。

const sym = Symbol("key");
console.log(String(sym)); // "Symbol(key)"

2. 处理 Symbol 类型的差异

${sym} 的限制：

JavaScript 规范规定 Symbol 类型 不能直接参与隐式转换，因此模板字符串插值会报错。

String(sym) 的兼容性：

显式调用 String() 函数会绕过隐式转换的限制，直接调用 Symbol 的 toString() 方法，生成描述性字符串。

3. 错误处理与安全性

${sym} 的风险：

若 sym 是 Symbol，模板字符串会直接中断执行并抛出错误，可能导致程序崩溃。

String(sym) 的健壮性：

无论 sym 是原始类型、对象还是 Symbol，String() 总能返回一个字符串，避免运行时错误。

console.log(String({})); // "[object Object]"
console.log(String(null)); // "null"

4. 适用场景对比

场景	${sym}	String(sym)
普通字符串拼接	✅ 推荐	⚠️ 冗余
处理 Symbol 类型	❌ 报错	✅ 安全
需要自定义 toString()	✅ 支持	✅ 支持

5. 底层机制扩展 

• 模板字符串的转换规则：
  模板字符串中的表达式会强制调用值的 toString() 方法（若存在），但对 Symbol 类型有特殊限制。
   
• String() 函数的转换逻辑：
  • 若值是 null 或 undefined，返回 "null" 或 "undefined"。
  • 若值是对象，调用其 toString() 方法（可能触发 Symbol.toPrimitive）。

总结与建议

• 优先使用 String()：
  当处理不确定类型（尤其是可能为 Symbol）的值时，显式调用 String() 更安全。
• 避免隐式转换陷阱：
  在模板字符串中插入变量前，确保其类型非 Symbol，或提前显式转换 。
• 特殊场景处理：
  若需保留 Symbol 的描述信息，可手动调用 sym.toString() 或 String(sym) 。

通过理解这些差异，可以在开发中更精准地控制字符串转换行为，避免潜在的运行时错误。