es6 模板字符串

模板字符串语法:
	es5写法:
		需要使用大量的“”(双引号)和 + 来拼接才能得到我们需要的模版
		实例:
			"He is <b>" + person.name + "</b> and we wish to know his" + person.age + ".That is all" 
    
	es6写法:
		用`(反引号)标识,用${}将变量括起来
		实例:
			`He is <b> ${person.name} </b> and we wish to know his ${person.age} .that is all`
	
注意:
	1. 由于反引号是模版字符串的标识,如果需要在字符串中使用反引号,就需要对其进行转义
		实例:
			`No matter\` what you do , I trust you.` 
	
	2. 模板字符串可以引入变量,不引入变量同样可以使用
		实例:
			`He is <b> Tom </b> and we wish to know his 12 .that is all`
			
	3. 可以先定义变量,然后在模版字符串中嵌入变量
		实例:
			let person = {name: 'Tom', age: 12}
			`He is <b> ${person.name} </b> and we wish to know his ${person.age} .that is all`
	
	4. 在${}中的大括号里可以放入任意的JavaScript表达式,还可以进行运算,以及引用对象属性。
		实例:
			let x = 10, y = 2;
			`He is <b> ${person.name} </b> and we wish to know his ${x + y} .that is all`
	 
	5. 模版字符串还可以调用函数,如果函数的结果不是字符串,那么,将按照一般的规则转化为字符串
		实例:
			function person () { return 'Tom' }
			`He is <b> ${person()} </b> and we wish to know his 12 .that is all`
	
	6. 模板字符串中的空格,换行等都会被响应效果
	
	7. 模板字符串中的${}内输入字符串,返回结果仍旧是字符串
		实例:	
			`He is <b> ${ 'Tom' } </b> and we wish to know his ${ '12' } .that is all`
			
	8. 模板字符串中还可以嵌套另一个模板字符串

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值