ES9 之带标记的模板字面量的使用方法

阅读时长 5 分钟读完

在 ES9 中,带标记的模板字面量是一个比较新的特性,它可以让我们更方便地对模板字面量进行分割、转换和拼接等操作,从而在前端开发中起到极大的便利作用。

什么是带标记的模板字面量

带标记的模板字面量是指在模板字面量(也就是以反引号 `` 包裹的字符串)前添加一个标记函数。这个标记函数会接收模板字面量中的所有文字作为参数,并返回一个新的字符串。

举个例子:

在这个例子中,我们定义了一个标记函数 myTag,它会将第一个参数(一个数组)拆成两个部分:字符串数组 strings 和其余的参数 values。对于上述例子,strings 则为 ['Hello ','!']values 则为 ['world']

然后我们通过调用 myTag 函数时,将要插入的值 world 传递到了该函数的括号中,使得 myTag 函数返回了一个新的字符串,即 Hi world!

带标记的模板字面量的使用方法

带标记的模板字面量可以用在如下几个场景中:

1. 格式化字符串

通过标记函数,我们可以在输出前对字符串进行一些额外的处理。例如,我们可以定义一个标记函数,将字符串中的大写字母转化为小写,再把转换后的字符串输出:

-- -------------------- ---- -------
-------- -------------- ---------- -
  ------ --------------------- -------- ------ -- -
    -------- --- -- -
      ------ ----------------------
    - ---- -
      ------ ----------------------------------------------------
    -
  -- ----
-
----------------------- --------------
-- -- ----- ------

在上述代码中,我们定义了一个新的字符串,通过字符串数组 strings 再加上插值 values 的处理,构建了一个新的字符串并输出。

2. 过滤和拼接字符串

我们可以使用标记函数将模板字面量进行完全自定义的拼接和过滤,例如,在一个商品列表中,我们希望只输出价格大于 1000 的商品名称和价格:

-- -------------------- ---- -------
----- -------- - -
  ------ --------- ------ -----
  ------ ------- ------ ------
  ------ ------- ------ ------
  ------ ---------- ------ ----
--
-------- -------------------- ---------- -
  ----- ---------------- - ----------------------- -- ------------- - ------
  ----- ------ - ---
  ------------------------ -- -- -
    --------------------
    ------------- -
      -------------------------------- -- -
        --------------------------------
      ---
    -
  ---
  ------ ----------------
-
-------- -------------------- -
  ------ ------------ - - --
-
-------- --------------------- -
  ------ ------------------------ - - --
-
---------------------------- --- ---- -------- ---- --- ------- ---- ------
  ---------------- ---------------
---
-- -- ---- --- ---- -------- ---- --- ------- ---- ------
--         ---- -- ------- ---- -- ------- 

在上述代码中,我们定义了一个库存商品数组 products,然后定义了两个函数分别用来拼接商品名称和价格,最后使用包裹并标记过滤函数 filterPrice 的模板字面量输出了价格大于 1000 的商品信息。

3. 国际化

带标记的模板字面量还可以帮助我们实现对字符串进行国际化处理。对于不同的语言,我们可以定义不同的字符串替换方法,然后在调用标记函数时传入对应的语言标识即可。

总结

带标记的模板字面量是一个十分强大和灵活的特性,可以让我们大大提高字符串的处理效率和可读性。希望通过本文的学习,读者可以更深入地理解和掌握这个特性,并在实际开发中加以应用。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64f9619af6b2d6eab30e517f

纠错
反馈