首页 > 编程语言 >JavaScript 的模板字符串

JavaScript 的模板字符串

时间:2024-08-30 15:54:07浏览次数:7  
标签:变量 标签 JavaScript https 字符串 模板

字符串插值

JavaScript 中使用反引号 ` 包裹的字符串叫模板字符串(template literals)。人们常用它拼接变量和字符串,即所谓的字符串插值(string interpolation)。在使用字符串插值时,使用 ${} 包裹变量或表达式,它是变量的占位符。

图片

多行文本

模板字符串支持多行文本(multi-line strings)。

图片

图片

嵌套模板

它还支持嵌套模板(nesting templates)。即在一个模板字符串的变量内,使用另一个模板字符串。

图片

图片

带标签的模板

它还有另外一个略显高级的用法:带标签的模板(tagged templates),有时也叫标签函数(tag function),指的都是一回事。

在带标签的模板中,标签其实是一个函数,它可以处理模板字符串的内容。该函数的第一个参数是字符串数组,包括模板字符串的所有静态字符字面量,后面的不定参数,按照先后顺序分别对应 ${} 对应的变量。

函数返回值会当作模板字符串变量的最终值。只要你想,返回值可以和入参完全无关。

图片

图片

标签函数属于可变参数函数(variadic functions),在 JavaScript 中可以使用三个点 ... 剩余参数(rest parameters)语法,将所有的变量收集到一个数组。

标签函数的返回值可以是任意类型,不一定是字符串。

图片

除了普通变量,带标签模板的“标签”还可以是表达式,只要它的操作符优先级大于 16 即可。满足条件的表达式有属性访问 x.y、函数调用 x(y)、创建对象 new x(y),甚至另一个标签模板字面量

图片

图片

图片

带标签模板的实际应用有哪些?如果你接触过谷歌的 zx 命令行工具,或者谷歌的 Lit 框架(谷歌真喜欢用它),就会见到它的实际用法。下图中的 $ 和 html 就是标签函数。

图片

图片

参考资料

Tagged templates

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates

google/zx

https://github.com/google/zx

Lit

https://lit.dev/

Rest parameters

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters

Operator precedence

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_precedence#table

标签:变量,标签,JavaScript,https,字符串,模板
From: https://blog.csdn.net/zhudapeng929/article/details/141720419

相关文章

  • 关于java输入字符串的一些问题
    最近自学java,学到了Scanner类这块,我想着测试一下输入,遇到了个问题,我想要输入两个字符串,但是我输入一个字符串后程序就停止运行了,有点疑惑,我的代码如下s1=scan.next();System.out.print(s1);s2=scan.nextLine();System.out.print(s2);结果就是只能输出s1,然后我就想起来这......
  • PowerShell Select-String:在字符串和文件中查找文本
    语法Select-String[-Culture<String>][-Pattern]<String[]>[-Path]<String[]>[-SimpleMatch][-CaseSensitive][-Quiet][-List][-NoEmphasis][-Include<String[]>][-Exclu......
  • 深度优先搜索模板
    深度优先搜索(DFS)是一种用于遍历或搜索图或树的算法。以下是深度优先搜索的模板:visited=set()defdfs(node):#如果节点已经访问过,则直接返回ifnodeinvisited:return#标记节点为已访问visited.add(node)#对当前节点的所......
  • GEE中用JavaScript计算遥感数据在两个日期中变化值的多年平均
      本文介绍在谷歌地球引擎GEE中,提取、计算某一种遥感影像产品在连续的多年中,2个不同时相的数据差值的多年平均值,并将计算得到的这一景差值的结果图像导出的方法。  首先,我们来看一下本文需要实现的需求。现在我们希望计算某一个地区中,在2013年到2020年的这8年中,第257天与249天......
  • Encoding.Default.GetByteCount(),C# 获取字符串字节长度
    原文链接:https://blog.csdn.net/lidin888/article/details/127674079一、C#获取字符串字节长度1.在C#语言中使用string字符串Unicode编码2.在C#语言中常用汉字占3个字节方式1:使用默认编码类获取字节长度Console.WriteLine(Encoding.Default.GetByteCount("张三"));//输......
  • 代码随想录day45 || 115 不同子序列, 583 两个字符串删除操作, 72 编辑距离
    115不同子序列funcnumDistinct(sstring,tstring)int{ //动态规划,思考一下判断连续和不连续的区别,如果相等都是左上角+1,如果不等,连续情况就是直接等于左上角,不连续情况直接归零 //dp[i][j]表示s[i]中存在t[j]结尾的的个数 //递推公式,不要求连续字串,所以,如果s[i......
  • 树形dp的各种应用题型与模板
    ///**//低落...最近做了以及看了树形dp这部分的知识,感觉有必要做一些整理,所以特来此地写下来。我将整理一些树形dp基本的模板与应用以及思想。1.树的直径:树上最长的链概念应该很好懂,那么现在来看看代码(简略版):#include<iostream>usingnamespacestd;structEDGE{ int......
  • P6192 【模板】最小斯坦纳树 题解
    Description给定一个包含\(n\)个结点和\(m\)条带权边的无向连通图\(G=(V,E)\)。再给定包含\(k\)个结点的点集\(S\),选出\(G\)的子图\(G'=(V',E')\),使得:\(S\subseteqV'\);\(G'\)为连通图;\(E'\)中所有边的权值和最小。你只需要求出\(E'\)中所有边的权值......
  • 《C++模板元编程:编程世界的魔法艺术》
    在C++的广阔编程领域中,模板元编程犹如一种神秘而强大的魔法艺术,为开发者打开了一扇通往极致性能与高度灵活性的大门。那么,究竟什么是模板元编程?又该如何在C++中进行模板元编程呢?首先,让我们来理解一下模板元编程的概念。模板元编程是一种在编译期进行计算和代码生成的技术......
  • CoreNext主题1.5.2免授权 | WordPress主题模板
    CoreNext主题1.5.2免授权 | WordPress主题模板探索无限可能:CoreNext主题1.5.2免授权WordPress主题模板在这个数字化的时代,网站已成为个人品牌和企业展示的窗口。对于那些追求独特风格和高效管理的用户来说,选择一个合适的WordPress主题模板至关重要。今天,我们将深入探讨Core......