本文介绍前端如何结合后台返回数据使用ES5模板字符串特性

需求描述：

后端服务返回字符串，想在前端执行字符串中的模板字符串，该如何实现？这里借用了eval()函数

<script type="text/javascript">
	let paramDate = "2021-08-27";
	let client = `这是个前端定义的模板字符串，可以直接获取paramDate 的值:${paramDate}；`;
	let serverStr = "`这是个后台服务模板字符串，需要获取到paramDate 的值:${paramDate }`";
	//错误的拼接，后台服务模板字符串不能得到解析，最后得到结果 ：
	//这是个前端定义的模板字符串，可以直接获取paramDate 的值:2021-08-27；
	//`这是个后台服务模板字符串，需要获取到paramDate 的值:${paramDate }`	
	let errorJoin = client  + serverStr ;
	console.log(errorJoin);
	//正确的拼接， 通过eavl()先解析模板字符串，最后得到结果：
	//这是个前端定义的模板字符串，可以直接获取paramDate 的值:2021-08-27；
	//这是个后台服务模板字符串，需要获取到paramDate 的值:2021-08-27
	let correctJoin = client + eval(serverStr );
	console.log(correctJoin);
</script>

补充

模板字符串是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能。它们在ES2015规范的先前版本中被称为“模板字符串”。
详见：模板字符串

eval()是全局对象的一个函数属性。
eval() 的参数是一个字符串。如果字符串表示的是表达式，eval() 会对表达式进行求值。如果参数表示一个或多个 JavaScript 语句，那么eval() 就会执行这些语句。不需要用 eval() 来执行一个算术表达式：因为 JavaScript 可以自动为算术表达式求值。
详见：eval()