vue3学习二：模板字符串

最新推荐文章于 2024-04-28 11:51:43 发布

wjdsg

最新推荐文章于 2024-04-28 11:51:43 发布

阅读量6.2k

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/anxiaoxiao61/article/details/122711906

版权

前端专栏收录该内容

9 篇文章 2 订阅

订阅专栏

模板字符串是为了解决字符串拼接问题，
在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>