【金秋打卡】第23天 再学JavaScript ES(6-10)全版本语法大全

课程名称：再学JavaScript ES(6-10)全版本语法大全
课程章节：2-31 String（字符串拼接问题）
课程讲师：快乐动起来呀
课程内容：

ES6 引入了模板字符串解决这个问题
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

模板字符串，都是用反引号表示
如果在模板字符串中需要使用反引号，则前面要用反斜杠转义

let greeting = `\`Yo\` World!`;

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中

在某些时候，嵌套模板是具有可配置字符串的最简单也是更可读的方法
在模板中，只需在模板内的占位符 ${ } 内使用它们，就可以轻松地使用内部反引号
例如，如果条件 a 是真的，那么返回这个模板化的文字

ES5:

var classes = 'header'
classes += (isLargeScreen() ?
   '' : item.isCollapsed ?
     ' icon-expander' : ' icon-collapser');

在 ES2015 中使用模板文字而没有嵌套：

   const classes = `header ${ isLargeScreen() ? '' :
    (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;

在 ES2015 的嵌套模板字面量中：

  const classes = `header ${ isLargeScreen() ? '' :
 `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;

带标签的模板字符串

更高级的形式的模板字符串是带标签的模板字符串。标签使您可以用函数解析模板字符串。标签函数的第一个参数包含一个字符串值的数组。其余的参数与表达式相关。最后，你的函数可以返回处理好的的字符串（或者它可以返回完全不同的东西 , 如下个例子所述）。用于该标签的函数的名称可以被命名为任何名字。

let person = 'Mike';
let age = 28;

function myTag(strings, personExp, ageExp) {
  let str0 = strings[0]; // "That "
  let str1 = strings[1]; // " is a "
  let str2 = strings[2]; // "."

  let ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';
  }

  // We can even return a string built using a template literal
  return `${str0}${personExp}${str1}${ageStr}${str2}`;
}

let output = myTag`That ${ person } is a ${ age }.`;

console.log(output);
// That Mike is a youngster.

课程收获：
模板字符串是增强版的字符串，用反引号（`）标识
可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量
如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中，不想要这个换行，可以使用trim方法消除它