ES6入门：模板字符串

ES6入门：模板字符串

一、模板字符串

const username1 = 'alex';

const username2 = `alex`;
console.log(username1, username2, username1 === username2);
//alex alex true

二、模板字符串与一般字符串的区别

const person = {
  username: 'Alex',
  age: 18,
  sex: 'male'
};

一般字符串：

const info =
  '我的名字是：' +
  person.username +
  ', 性别：' +
  person.sex +
  ', 今年' +
  person.age +
  '岁了';
console.log(info);
//我的名字是Alex，性别：male，今年18岁了

模板字符串：

const info = `我的名字是：${person.username}, 性别：${person.sex}, 今年${person.age}岁了`;
console.log(info);
//我的名字是Alex，性别：male，今年18岁了

注意：
1.和其他东西一起使用的时候，使用模板字符串，方便注入
2.其他情况下使用模板字符串或一般字符串都行
三、模板字符串的注意事项
1、输出多行字符串
1)一般字符串：

const info = '第1行\n第2行';
// console.log(info);

结果：

第一行
第二行

2)模板字符串：

法一：
	const info = `第1行\n第2行`;
法二：
	const info = `第1行
	第2行`;    //这里前边有空格

输出结果：

法一：
第一行
第二行

法二：
第一行
	第二行
//模板字符串中，所有的空格、换行或缩进都会被保留在输出之中

2.输出 ` 和 \ 等特殊字符

const info = `\`\\`;    //需要转义
console.log(info);     //`\

一般字符：不需要转义
const info = `'`;   
console.log(info);   //'

3.模板字符串的注入

const username = 'alex';
const person = { age: 18, sex: 'male' };
const getSex = function (sex) {
  return sex === 'male' ? '男' : '女';
};

const info = `${username}, ${person.age},${getSex(person.sex)}`;
console.log(info);

结论：只要最终可以得出一个值的就可以通过 ${} 注入到模板字符串中