PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > ES6模板字面量和标签函数...她们硬是把程序员逼成秃顶!

ES6模板字面量和标签函数...她们硬是把程序员逼成秃顶!

张福根一修品牌运营
张福根一修品牌运营 原创
2020年11月03日 16:23:06 956浏览

实例演示模板字面量与标签函数

案例效果:

模板字面量与标签函数

案例源码:

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>实例演示模板字面量与标签函数</title>  </head>  <body>    <script>      // 1、模板字面量      let num = 10,        price = 20;      // 字符串拼接模式:      let str =        "商品数量: " + num + " 单价: " + price + " 总计: " + num * price;      console.log(str);      // 字面量模式:      num = 30;      price = 50;      str = `商品数量: ${num} 单价:${price} 总计: ${num * price}`;      console.log(str);      //  总结:      // 模板字面量中,变量或表达式叫"插值", 变量和表达式必须返回一个值      // =================================================================================      // 2、标签函数      let num1 = 50,        price1 = 20;      function show(literals, val1, val2) {        let str = `<div>${literals[0]}${val1} 个</div>        <div>${literals[1]}${val2} 元</div>        <h2> ${literals[2]} ${val1 * val2}元</h2>`;        return str;      }      let result = show`商品数量: ${num1} 单价: ${price1} 总计: ${        num1 * price1      }`;      console.log(result);      //   将内容渲染到页面中;      document.body.appendChild(        document.createElement("div")      ).innerHTML = result;    </script>  </body></html>

案例总结:

1. 模板字量面:

  • 在字符串中嵌入变量,只能拼装方式

  • 模板字面量中,变量或表达式叫”插值”, 变量和表达式必须返回一个值

2. 标签函数:

  • 标签函数: 用来自定义模板字面量中的插值的行为,第一个参数必须是模板字面中的原始字符串的内容组成的数组,从第二个开始,与模板字面量中的插值一一对应

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议