JavaScript字符串插值与字符串串联给出了不同的结果

Question

我遇到了JavaScript字符串插值的情况，其结果与字符串串联没有相同的结果。

这是代码的简化版本，显示了差异：

const mmt = moment();
console.log('concatenated: ' + mmt); // "concatenated: 1651070909974"
console.log(`interpolated: ${mmt}`); // "interpolated: Wed Apr 27 2022 10:48:29 GMT-0400"
console.log('mmt.valueOf(): ' + mmt.valueOf()); // "mmt.valueOf(): 1651070909974"
console.log('mmt.toString(): ' + mmt.toString()); // "mmt.toString(): Wed Apr 27 2022 10:48:29 GMT-0400"

因此，我的直接想法是，这是由于.toString（） and 和.valueof（），所以我制作了一个小测试对象来验证：

const obj = {
  toString: () => 'toString',
  valueOf: () => 'valueOf',
};

console.log('concatenated: ' + obj); // "concatenated: valueOf"
console.log(`interpolated: ${obj}`); // "interpolated: toString"
console.log('obj.valueOf(): ' + obj.valueOf()); // "obj.valueOf(): valueOf"
console.log('obj.toString(): ' + obj.toString()); // "obj.toString(): toString"

但是，当我尝试使用一个日期对象尝试此对象时（与.toString（） vs .valueof（）有不同的结果。 ），我做不是获得相同的行为 - 这段时间的插值和串联都使用.toString（） value：

const dte = new Date();
console.log('concatenated: ' + dte); // "concatenated: Wed Apr 27 2022 10:48:29 GMT-0400 (Eastern Daylight Time)"
console.log(`interpolated: ${dte}`); // "interpolated: Wed Apr 27 2022 10:48:29 GMT-0400 (Eastern Daylight Time)"
console.log('dte.valueOf(): ' + dte.valueOf()); // "dte.valueOf(): 1651070909974"
console.log('dte.toString(): ' + dte.toString()); // "dte.toString(): Wed Apr 27 2022 10:48:29 GMT-0400 (Eastern Daylight Time)"

，所以我的问题是：在串联与插值时，插值值如何转换为字符串的实际规则是什么？为什么日期似乎与其他对象有所不同？ （我已经尝试查找此问题，但是到目前为止，我的谷歌搜索没有成功...）

Answer 1

行为的差异确实与+运算符有关，该操作员背后有一个特定的过程：

摘要操作上的ecmascript规范 toprivitive 指定如果没有提供类型提示（如 +操作员）发生以下情况：

• 如果对象具有symbor.tprimitive方法，那么它将称为（带有提示“默认”）。此方法可以将调用转发到toString。 date对象就是这种情况。
• 如果对象没有这样的方法，则“ number”为默认值， valueof 将被调用。 MONM对象就是这种情况。

处理+运算符时，此复杂过程的原因是，它也用于算术添加。

在评估模板文字中不存在这种复杂性，其中始终是字符串串联的意图，因此符号。toprimitive方法将用“字符串”提示调用（而不是“默认”），或者如果不存在该方法，则会调用tostring。

因此，您假设+是纯字符串串联，不是那么准确。当您使用.concat方法：

const mmt = moment();
console.log('concatenated: '.concat(mmt));
// Not same result as with +
console.log('plus operator: ' + mmt);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js"></script>