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

let name  = "wjdsg"
console.log("您好 "+name)

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

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

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

function login(username,password){
	axios.post.url="/login?username="+username+"&password="+password
}

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

function login2(username,password){
	axios.post.url=`/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"
		console.log("您好 "+name)
		/**
		 * 而在es6中可以使用模板字符串拼接
		 * { `` }：反引号，这个符合按tab键上面一格
		 */
		let name2="wjdsg"
		console.log(`hello ${name2}`)
		
		/**
		 * 有什么用呢？
		 * 在实战中，可以用模板字符串和请求结合起来,
		 * 比如：登录请求,以前的拼接是这样的：
		 */
		function login(username,password){
			axios.post.url="/login?username="+username+"&password="+password
		}
		/**
		 * 而使用模板字符串，则可以：
		 */
		function login2(username,password){
			axios.post.url=`/login2?username=${username}&password=${password}`;
		}
		
		/**
		 * 注意的是，如果项目中使用到模板引擎：freemarker ，模板字符串会和freemarker冲突，
		 * 解决方法，将函数写成js脚本，放到外面，再在本页面，引入。
		 */
		

	
	</script>

	
</body>
</html>

# vue.js # javascript # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

【GaussDB(for MySQL)】 Big IN查询优化

avatar 华为云开发者联盟
cover

GaussDB细粒度资源管控技术透视

avatar 华为云开发者联盟
cover

关于Java Chassis 3的契约优先（API First）开发

avatar 华为云开发者联盟