【ES6系列】Template

最新推荐文章于 2024-10-30 15:30:16 发布

zoe驿鹿

最新推荐文章于 2024-10-30 15:30:16 发布

阅读量294

点赞数

分类专栏： ES6 Javascript 基本功文章标签：模板字符串 tag函数

本文链接：https://blog.youkuaiyun.com/webFrontEndDev/article/details/103047183

版权

Javascript 基本功同时被 2 个专栏收录

43 篇文章

订阅专栏

ES6

15 篇文章

订阅专栏

本文介绍ES6中引入的字符串模板功能，包括变量嵌入、逻辑运算及换行处理，对比ES5的字符串拼接方式，展示更优雅的代码编写方法。同时，深入探讨了Tag函数的应用，如何通过自定义函数实现模板引擎的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ES5 中字符串换行、包含变量或表达式、包含逻辑运算怎么处理？ES6有更优雅便捷的方式吗？

ES6之前用字符串拼接+逻辑判断的方式进行处理。

ES6 新增语法：

1、字符串拼接 String Literals

const a = 10
const b = 11
const c = 'javascript'
const str = `my age is ${a+b} i like ${c}`
console.log(str) // my age is 21 i like javascript

2、tag 函数 Tag Literals

//定义一个 Tag 函数，然后用这个 Tag 函数来充当一个模板引擎：

// 参数：strings 返回模板客串中被所有变量分隔开的字符串集合
// type 参数对应模板字符串中的第一个变量，Tag 函数可以有多个 type 类似的参数
function Price(strings, type) {
  let s1 = strings[0]
  const retailPrice = 20
  const wholeSalePrice = 16
  let showTxt
  if (type === 'retail') {
    showTxt = '购买单价是：' + retailPrice
  } else {
    showTxt = '购买进价是：' + wholeSalePrice
  }
  return `${s1}${showTxt}`
}
let showTxt = Price `您此次的${'retail'}`
console.log(showTxt) //您此次的购买单价是：20

3、字符串换行

ES6 字符串换行不再需要手动添加 '\n' ，字符串模板可以识别代码中的换行。