模板字符串和标签函数

初识模板字符串

  在es5中定义字符串要通过’ '或者" "来表示字符串，而在es6之后新增了模板字符串的方式来表示字符串,通过反引号来标识。

const es5 = 'i am string'	
const es6 = `i also string` 

  传统的方式里面如果要换行，需要通过n来表示，而模板字符串可以支持换行。同时还支持通过插值表达式的方式去定义变量。

const name = 'tom'
const = `hey,${name}`  // hey,tom

带标签的模板字符串

  在定义字符串之前我们可以添加标签，例1中的代码中的conslo.log就是标签。
例一

	//通过这种方式会打印一个数组[`hello world`]
	const str = console.log`hello world`
	

  那么为什么打印的是数组？而数组又是如何存放模板字符串的内容？下面例二中我们将对这个机制进行研究。
例二

	const name  = 'tom'
	const gender = true
	//使用标签函数前必须先定义这个标签函数
	function myTagFunc(strings,name,gender){
		console.log(strings)//['hey','is a','.']
		console.log(name)//tom
		console.log(gender)//true
		return `123`
	}
	const result = myTagFunc`hey,${name} is a ${gender}.`
	//这个时候result就是接收对模板字符串进行标签函数处理的返回值。
	console.log(result)//123

  因为在模板字符串中可能会有嵌入的表达式，所以我们这里的数组是按照表达式分割过后静态的内容，除了这个数组以外，这个标签函数还可以接收到表达式内部的值 。
总而言之，标签函数就是对模板字符串进行加工返回结果。

加餐 字符串的扩展方法

• includes()
• startsWith()
• endsWith()

//假设这是一个错误消息
const message = `Error: foo is not defined`
console.log(message.startsWith('Error'))//true
console.log(message.endsWith('.'))//true
console.log(message.includes('foo'))//true

最后

以上就是斯文万宝路为你收集整理的模板字符串和标签函数的全部内容，希望文章能够帮你解决模板字符串和标签函数所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。