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