模板字符串
es6新增的一种创建字符串的方式使用反引号(``)定义
之前JavaScript创建变量的写法:
let name = 'Nanchen'; console.log(name); //Nanchen
输出如下:
使用反引号定义的写法
let name = `Nanchen`; console.log(name); //Nanchen
效果如下图:
模板字符串中可以解析变量
传统的做法需要用大量的""(引号)和 + 来拼接字符串才能得到想要的模板
let name = 'Nanchen' let sayHello = "my name is " + name console.log(sayHello); //my name is Nanchen
使用反引号定义的写法:
let name = `Nanchen`; let sayHello = `my name is ${name}` console.log(sayHello); //my name is Nanchen
模板字符串中可以换行
模板字符串:用反引号(``)标识,把变量用${}将括起来
let result = { name: 'Nanchen', age: 8, sex: '男' } console.log(result); //{name: "Nanchen", age: 8, sex: "男"} let html = ` <div> <span>${result.name}</span> <span>${result.age}</span> <span>${result.sex}</span> </div> `; document.write(html)
效果如下:
模板中也可以调用函数:
const sayHello = function () { return 'web学习'; }; let greet = `${sayHello()} 需要努力`; console.log(greet);
效果如下:
表示多行字符串,所有的空格和缩进都会被输出!!
接上个例子:
const sayHello = function () { return 'web学习'; }; let greet = `${sayHello()} 需要努力 换行`; console.log(greet);
在${}中如果没有给变量命名的话,就会获取不到,然后报错
console.log(`你好${name}`);//Uncaught ReferenceError: string is not defined
总结:
.模板字符串可以当连接符使用 也可以当普通引号使用
模板字符串中可以进行空格缩进以及换行
模板字符串可以调用函数
不给变量命名的话会报错