vue3学习二：模板字符串

时间：2025-02-28 08:18:37

模板字符串是为了解决字符串拼接问题，
在es5中，字符串拼接是这样的：

let name  = "wjdsg"
("您好 "+name)

而在es6中可以使用模板字符串拼接
{ `` }：反引号，这个符合按tab键上面一格

let name2="wjdsg"
(`hello ${name2}`)

有什么用呢？
在实战中，可以用模板字符串和请求结合起来,
比如：登录请求,以前的拼接是这样的： 

function login(username,password){
	="/login?username="+username+"&password="+password
}

而使用模板字符串，则可以：

function login2(username,password){
	=`/login2?username=${username}&password=${password}`;
}

 注意的是，如果项目中使用到模板引擎：freemarker ，模板字符串会和freemarker冲突，
解决方法，将函数写成js脚本，放到外面，再在本页面，引入。

完整代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>模板字符串</title>
</head>
<body>
	<script>
		/**
		 * 模板字符串是为了解决字符串拼接问题，
		 * 在es5中，字符串拼接是这样的：
		 */
		let name  = "wjdsg"
		("您好 "+name)
		/**
		 * 而在es6中可以使用模板字符串拼接
		 * { `` }：反引号，这个符合按tab键上面一格
		 */
		let name2="wjdsg"
		(`hello ${name2}`)
		
		/**
		 * 有什么用呢？
		 * 在实战中，可以用模板字符串和请求结合起来,
		 * 比如：登录请求,以前的拼接是这样的：
		 */
		function login(username,password){
			="/login?username="+username+"&password="+password
		}
		/**
		 * 而使用模板字符串，则可以：
		 */
		function login2(username,password){
			=`/login2?username=${username}&password=${password}`;
		}
		
		/**
		 * 注意的是，如果项目中使用到模板引擎：freemarker ，模板字符串会和freemarker冲突，
		 * 解决方法，将函数写成js脚本，放到外面，再在本页面，引入。
		 */
		

	
	</script>

	
</body>
</html>

相关文章