字面量 javascript-JavaScript 中的字符串类型模板文字定义字符串

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

ECMAScript 6 添加了使用模板文字定义字符串的功能。 与使用单冒号或双冒号不同，模板文字保留换行符，允许跨行定义字符串：

 let str1 = '早起的年轻人n喜欢经常跳步';
 let str2 = `早起的年轻人
 喜欢经常跳步`;
 console.log(str1);
 // 早起的年轻人
 // second line"
 console.log(str2);
 // 早起的年轻人
 // 喜欢经常跳步
 console.log(str1 === str2); // true

比定义 HTML 模板：

  let pageHTML = `
  

    
      早起的年轻人​
    
  `;

反逗号内的空格保留在模板字符中，因此使用它们时要小心。

    // 这个模板字面量在换行符之后有25 个空格符
    let str1 = `first line
                              second line`;
    console.log(str1.length);   // 47
    // 这个模板字面量以一个换行符开头
    let str2 = `
    first line
    second line`;
    console.log(str2[0] === 'n'); // true

​支持字符串插值字面量 javascript，即连续定义中可以插入一个或多个值。

上面描述的模板文字是一种特殊的 JavaScript 复杂表达式，但求值后的结果是一个字符串。 模板文字在定义后立即被评估并转换为字符串实例，并且任何中间变量也从最接近的范围获取它们的值。

字符串插值是使用 ${} 内的 JavaScript 表达式实现的：

let value =10;
let exponent = 'second';
// 以前
let str1 =
  value + ' to the ' + exponent + ' power is ' + (value ＊ value);
// 现在，可以用模板字面量这样实现： 反引号 ​`
let str2 =
  `${ value } to the ${ exponent } power is ${ value ＊ value }`;
console.log(str1);   // 10 to the second power is 100
console.log(str2);   // 10 to the second power is 100

所有插入的值都使用toString()强制转换为字符串，并且任何JavaScript表达式都可以用于注册。 嵌套模板字符串不需要通配符：

    console.log(`Hello, ${ `World` }! `);   // Hello, World!

toString() 在将表达式转换为字符串时被调用：

let foo = { toString: () => 'World' };
console.log(`Hello, ${ foo }! `);   

可以在注册表达式中调用函数和方法：

function capitalize(word) {
  return `${ word[0].toUpperCase() }${ word.slice(1) }`;
}
let str1 = `${ capitalize('hello') }, ${ capitalize('world') }! `;​
console.log(str1); // Hello, World!

模板文字还支持标签函数的定义，通过该函数可以自定义插补行为。

let a = 10​;
let b = 12;
function simpleTag(str1, str2, str3, str4​) {
  console.log(str1​);
  console.log(str2​);
  console.log(str3​);
  console.log(str4​);
  return '早起的年轻人​';
}
let untaggedResult = `${ a } + ${ b } = ${ a + b }`;
let taggedResult=simpleTag`${a}+${b}=${a+b}`;
​​
console.log(untaggedResult);    // "10 + 12= 22​"
console.log(taggedResult);      // "早起的年轻人​"

由于表达式参数的数量是可变的，因此通常应使用剩余运算符：

let a = 6;
let b = 9;
functionsimpleTag(strings, ...expressions){
  console.log(strings);
  for(const expression of expressions) {
    console.log(expression);
  }
  return '早起的年轻人​';
}
    let taggedResult = simpleTag`${ a } + ${ b } = ${ a + b }`;
console.log(taggedResult);  

如果要将这些字符串与计算表达式的结果连接起来作为默认返回的字符串字面量 javascript，可以这样做：

  let a = 6;
  let b = 9;
  function zipTag(strings, ...expressions) {
    return strings[0] +
            expressions.map((e, i) => `${e}${strings[i + 1]}`)
                      .join('');
  }
  ​let st1 =  `${ a } + ${ b } = ${ a + b }`;
  let st2​ = zipTag`${ a } + ${ b } = ${ a + b }`;
  console.log(st1​);   // "6 + 9 = 15"
  ​console.log(st2);     // "6 + 9 = 15"