模板字符串
模板字符串相当于加强版的字符串,用反引号 `,除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式。
基本用法
普通字符串
let string = `Hello'\n'world`;
console.log(string);
// "Hello'
// 'world"
多行字符串:
let string1 = `Hey,
can you stop angry now?`;
console.log(string1);
// Hey,
// can you stop angry now?
字符串插入变量和表达式。
变量名写在 中 , {} 中, 中,{} 中可以放入 JavaScript 表达式。
let name = "Mike";
let age = 27;
let info = `My Name is ${
name},I am ${
age+1} years old next year.`
console.log(info);
// My Name is Mike,I am 28 years old next year.
字符串中调用函数:
function f(){
return "have fun!";
}
let string2= `Game start,${
f()}`;
console.log(string2); // Game start,have fun!
注意要点
模板字符串中的换行和空格都是会被保留的
innerHtml = `<ul>
<li>menu</li>
<li>mine</li>
</ul>
`;
console.log(innerHtml);
// 输出
<ul>
<li>menu</li>
<li>mine</li>
</ul>
标签模板
标签模板,是一个函数的调用,其中调用的参数是模板字符串。
当模板字符串中带有变量,会将模板字符串参数处理成多个参数。
alert`Hello world!`;
// 等价于
alert('Hello world!');
function f(stringArr,...values){
let result = "";
for(let i=0;i<stringArr.length;i++){
result += stringArr[i];
if(values[i]){
result += values[i];
}
}
return result;
}
let name = 'Mike';
let age = 27;
f`My Name is ${
name},I am ${
age+1} years old next year.`;
// "My Name is Mike,I am 28 years old next year."
f`My Name is ${
name},I am ${
age+1} years old next year.`;
// 等价于
f(['My Name is',',I am ',' years old next year.'],'Mike',28);