js 模板字符串``的常用方法

最新推荐文章于 2024-08-27 16:57:25 发布

空城三梦

最新推荐文章于 2024-08-27 16:57:25 发布

阅读量767

点赞数 1

分类专栏： JS 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_48068420/article/details/122112517

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>模板字符串的方法</title>
</head>
<body>
	<div></div>
</body>
<script>
	// 实现原理
	let name = 'list';
	let age = 18;
	let res = `My name is ${name},I am ${age} years old`;
	// 内部的原理，正则表达式的使用
	res = res.replace(/\$\{([^}]*)\}/g,function() {
		console.log(arguments);
		return eval(arguments[1])
	})
	console.log(res)


	// 模板字符串拼接
	let info = [name,age];
	let lis = info.map(function(item) {
		return `<li>${item}</li>`;
	})
	let ulString = `
	<ul>
		${lis.join('')}
	</ul>
	`;
	document.write(ulString) //把拼接的字符串写到页面


	// 模板字符串嵌入表达式进行运算
	let x = 1;
	let y = 2;
	let obj = {a:1,b:2};
	console.log(`${x} + ${y} = ${x + y}`);
	console.log(`${obj.a + obj.b}`);



	// 模板字符串调用函数
	function sayHello() {
		return 'hello 刘富贵'
	}
	console.log(`${sayHello()}`)


	// 模板字符串嵌套模板字符串
	const tmpl = addrs =>`
		<table>
			${addrs.map(addr =>`
				<tr><td>${addr.first}</td></tr>
				<tr><td>${addr.last}</td></tr>
				`).join('')}
		</table>
	`;
	const data = [
    { first: '<Jane>', last: 'Bond' },
    { first: 'Lars', last: '<Croft>' },
];
console.log(tmpl(data));


// 模板字符串标签模板功能
	alert`hello`;
	// 等同于
	alert(['hello'])
	// 解析：标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是他的参数。
</script>
</html>