一次开发过程中,发现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()方法,使得看似差不多的代码得到了完全不同的结果。

right