3.模板字符串

原创于 2021-11-13 16:09:43 发布 · 323 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

ES 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用模板字符串在JavaScript中处理字符串，包括自定义函数的运用、动态变量的插入以及字符串的扩展方法。通过实例展示了如何利用`${}

模板字符串

以``包裹字符串，以${变量}形式串联变量

直接换行/ 嵌入变量
带标签的模板字符串：为了更好处理字符串变量
(1) 自定义函数，写在模板字符串的前面
(2) 通过${}将模板字符串的内容分成静态部分和动态，将静态部分以数组的方式存入到函数形参第一位，动态部分以形参的形式接着传入函数
字符串的扩展方法：startsWith()、endsWith()、includes()

      let { log } = console;
   	  // 换行：hello es2015, 和this is a 'string'
        const str = `hello es2015,       
        this is a 'string' `;
        log(str); 
	  // 变量拼接
        const name = 'tom';
        const msg = `hey,${name} -- ${1 + 2}`;
        log(msg); // hey,tom -- 3


		// 标签函数：参数 = 表达式分割后的静态内容，所有的变量值
		const name = 'tom';
		const gender = false;
		function myTagFunc(strs,name,gender) {
		    log(strs,name,gender); // ["hey,", "is a ", "."]  'tom' false
		}
		const result = myTagFunc`hey,${name}is a ${gender}.`;
		
		
		// 标签函数：字符串的扩展方法
		const msg = 'Error: foo is not defined.';
		log( msg.startsWith('Error'),
		        msg.endsWith('.'),
		        msg.includes('foo') 
		); //  true true true