ECMAScript 6(ES6) 特性概览和与ES5的比较5-文字模板

1.字符串插值

单行和多行字符串的直观表达式插值。 (注意:不要混淆,模板文字最初在ECMAScript 6语言规范草案中命名为“模板字符串”)
ECMAScript 6

var customer = { name: "Foo"}
var card = { amount: 7, product: "Bar", unitprice: 42}
var message = `Hello ${customer.name},
want to buy ${car.amount} ${card.product} for 
a total of ${card.amount * card.unitprice} bucks ?`
//前后结尾的是右上顿号` 键盘tab上面的按键,不是单引号',换行不需要换行符

ECMAScript 5

var customer = { name: "Foo"};
var card = { amount: 7, product: "Bar", unitprice: 42};
var message = "Hello" + customer.name + ",\n" + "want to buy" + card.amount + " "+ card.product + "for\n" + "a total of" + (card.amount * card.unitprice) + "bucks?";

2.自定义插值

任意方法的灵活表达插值
ECMAScript 6

get`http://example.com/foo?bar=${bar + baz}&quux=${quux}

ECMAScript 5

get(["http://example.com/foo?bar=", "&quux=", ""],bar + baz, quux);

3.原始字符串访问

访问原始模板字符串内容(不解释反斜杠)。(看不懂)
ECMAScript 6

function quux (strings, ...values) {
    strings[0] === "foo\n"
    strings[1] === "bar"
    strings.raw[0] === "foo\\n"
    strings.raw[1] === "bar"
    values[0] === 42
}
quux`foo\n${ 42 }bar`

String.raw`foo\n${ 42 }bar` === "foo\\n42bar"

ECMAScript 5

//ES5中没有对应的表达方式
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值