JavaScript |模板字面量

ES6 中的 Template 字面量提供了创建字符串的新功能，可以更好地控制动态字符串。传统上，字符串是使用单引号 (')或双引号 (")引号创建的。模板字面量是使用反引号 (`)字符创建的。

句法：

var s=`some string`;

多行字符串：为了创建多行字符串，使用转义序列\n来给出字符。但是，Template 字面量不需要添加\n字符串结尾，只有当它获得反引号 (`)字符时。

• 例子：

  // Without template literal
  console.log('Some text that I want \non two lines!');
    
  // With template literal
  console.log(`Some text that I want
  on two lines!`);

• 输出：

  Some text that I want
  on two lines!
  Some text that I want
  on two lines!

表达式：动态地将值添加到新的模板字面量表达式中。 ${} 语法允许其中的表达式产生值。该值可以是存储在变量中的字符串或计算操作。

${expression}

• 示例：下面的代码显示了模板字面量中表达式的使用。

  let principal = 1000;
  let noofyears = 1;
  let rateofinterest = 7;
    
  let SI = `Simple Interest is ${(principal *
              noofyears * rateofinterest)/100}`;
  alert("Simple Interest is" + SI);

• 输出：
  

标记模板：模板字面量的功能之一是它能够创建标记模板字面量。 Tagged 字面量像函数定义一样编写，但不同之处在于调用此字面量的时间。字面量调用没有括号（）。字符串数组作为参数传递给字面量。

• 示例 1：

    
  function TaggedLiteralEg(strings) {
      document.write(strings);
  }
    
  TaggedLiteralEg `GeeksforGeeks`; 
    
    

• 输出：

  GeeksforGeeks

• 示例 2：也可以将值传递给标记的字面量。该值可以是某个表达式的结果，也可以是从变量中获取的值。下面的代码显示了 Tagged 字面量的使用。

  function TaggedLiteralEg(strings, value, value2) {
      document.write(strings);
      document.write("<br>"+value2+"    "+value);
        
  }
    
  let text = 'GeeksforGeeks';
  TaggedLiteralEg`test ${text} ${2+3}`;    

• 输出：

  test , ,
  5 GeeksforGeeks

原始字符串：模板字面量的原始方法允许在输入原始字符串时访问它们，而无需处理转义序列。此外，存在 String.raw() 方法来创建原始字符串，就像默认模板函数一样，并且会创建字符串连接。

• 例子：

  var s=String.raw`Welcome to GeeksforGeeks Value of expression is ${2+3}`;
  document.write(s);

• 输出：

  Welcome to GeeksforGeeks Value of expression is 5

嵌套模板：如果模板包含多个表达式评估或多个条件检查，则可以嵌套模板。而不是使用 else if ladder，这是可读的，并且给开发人员带来了便利。下面的代码使用条件运算符和嵌套模板字面量找到三个数字中的最大值。

• 例子：

  function maximum(x, y, z) {
  var c = `value ${ (y>x && y>z) ? 'y is greater' :
  `${x>z ? 'x is greater' : 'z is greater'}` }`;
  return (c);
  }
  document.write(maximum(5, 11, 15)+"<br>");
  document.write(maximum(15, 11, 3)+"<br>");
  document.write(maximum(11, 33, 2)+"<br>");
                      

• 输出：

  value z is greater
  value x is greater
  value y is greater