javascript模版字符串与传统字符串拼接的差异

󰃭 2017-10-18

一次开发过程中，发现moment转换字符串的方式根据使用的差异，出现不同的返回值。示例如下：

const moment = require('moment')

const now = moment()

const str1 = `${now}`  // "1508317065981"

const str2 = `${encodeURIComponent(now)}` // "Wed%20Oct%2018%202017%2016%3A57%3A45%20GMT%2B0800"

根据上述代码发现两者的差异在于str1中now直接使用模版字符串进行类型转换，而str2中now则转为字符串后传入函数，所以取得完全不同的格式。由于项目代码会经过babel转为es5语法，观察得通过babel模版字符串会转换为传统’+‘号拼接的方式：

// babel转化前
const str1 = `${now}`

// babel转化后
var str1 = '' + now;

基于转化前后的代码，分别尝试ES5字符串拼接，和模版字符串的差异

var now = moment();

console.log(`${now}`); // "Wed Oct 18 2017 17:38:01 GMT+0800"

console.log('' + now); // "1508319481681"

console.log(now.toString()) // "Wed Oct 18 2017 17:39:00 GMT+0800"

console.log(now.valueOf()) // 1508319540124

上述代码证实，模版字符串经过babel转换之后，其实改变了解析的方式，模版字符会首先去调用 toSting()方法，而转换过后的传统字符串拼接方法，则是优先调用了valueOf()。在实际使用的时候将moment对象传入encodeURIComponent，经过类型隐式转换，moment调用了toString()方法，使得看似差不多的代码得到了完全不同的结果。