看了阮老师的ES6入门再加上自己的一些理解整理出的学习笔记
介绍:
样子: `` 反引号,tab上面的那个键,同该符号包裹的字符串能够带来的功能如下:
- 可以包涵换行
- 在反引号以内,可以有多个换行,都能够在使用的时候被识别
- 可以嵌入变量
- 使用美元符号和大括号包裹变量${对象名.属性名}
- 可以原生输出
- 原生输出包含转义字符串的内容String.raw模板字符串
例子:
- 传统的JavaScript语言,输出模板通常是这样写的,字符串拼接很让人头疼,也很容易出错。
$(‘#result‘).append( ‘There are <b>‘ + basket.count + ‘</b> ‘ + ‘items in your basket, ‘ + ‘<em>‘ + basket.onSale + ‘</em> are on sale!‘ );
- ES6引入了模板字符串解决这个问题
$(‘#result‘).append(` There are <b>${basket.count}</b> items in your basket, <em>${basket.onSale}</em> are on sale! `);
- 如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。
$(‘#list‘).html(` <ul> <li>first</li> <li>second</li> </ul> `);
- 模板字符串中嵌入变量,需要将变量名写在
${}
之中。(注:不声明会报错)
let name = ‘jim‘, age = 18, gender = ‘male‘; console.log(`name : ${name} , age : ${age} , gender : ${gender}`)
- 大括号内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性,而且还能调用函数
let x = 1, y = 2; console.log(`${x} + ${y * 2} = ${x + y * 2}`)// "1 + 4 = 5" let obj = {x: 1, y: 2}; console.log(`${obj.x + obj.y}`)// 3 function fn() { return "Hello World"; } console.log(`foo ${fn()} bar`)// foo Hello World bar
- 模板字符串还可以嵌套
const tmpl = addrs => ` <table> ${addrs.map(addr => ` <tr><td>${addr.first}</td></tr> <tr><td>${addr.last}</td></tr> `).join(‘‘)} </table> `;
感谢观看!
最后安利阮老师的ES入门 : http://es6.ruanyifeng.com/#docs/string
时间: 2024-10-14 20:39:13