【ES6】模板字符串

模板字符串

• ES5 中我们表示字符串的时候使用''或者""
• 在 ES6 中，我们还有一个东西可以表示字符串，就是``(反引号)

let str = `hello world`;
console.log(typeof str)	//string

1. 使用方法

• 模板字符串可以换行书写

// 这个单引号或者双引号不能换行，换行就会报错了
let str = 'hello world';
// 下面这个报错了
let str2 = 'hello 
world';
//反引号就不会报错
let str3 = `hello 
world`;

• 模板字符串会保留空格、缩进、换行

let str1 = `hello 
world`;
let str2 = `hello world`;
let str3 = `  hello world`;
console.log(str1);
console.log(str2);
console.log(str3);

• 在模板字符串中需要使用反引号，则前面要用反斜杠\转义。

let str = `hello\`world`;
console.log(str);	// hello`world

• 模板字符串可以互相嵌套

let arr = (addrs) => `
  <table>
  ${addrs.map((addr) => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;

2. 嵌入变量

// ES5 需要使用字符串拼接变量的时候
let num = 100;
let str = 'hello' + num + 'world' + num;
console.log(str);	//hello100world100

// 直接写在字符串里面不好使
let str2 = 'hellonumworldnum';
console.log(str2); // hellonumworldnum

• ${}就是用来书写变量的位置

//模板字符串拼接变量
let num = 100;
let str = `hello${num}world${num}`;

• ${}里面可以插入js 表达式

let x = 1;
let y = 2;

let arr1 = `${x} + ${y} = ${x + y}`
let arr2 = `${x} + ${y * 2} = ${x + y * 2}`

let obj = {x: 1, y: 2};
let arr3 = `${obj.x + obj.y}`

console.log(arr1);	// 1 + 2 = 3
console.log(arr2);	// 1 + 4 = 5
console.log(arr3);	// 3

• ${}里面可以调用函数

function fn() {
  return "Hello World";
}
let arr = `js ${fn()} nb`
console.log(arr);	// js Hello World nb