ES2015新增${}占位符语法结构
${}占位符浏览器支持：
（1）IE9+浏览器支持占位符。
（2）edge浏览器支持占位符。
（3）火狐浏览器支持占位符。
（4）谷歌浏览器支持占位符。
（5）opera浏览器支持占位符。
（6）safria浏览器支持占位符。
一、什么是占位符：
首先解决第一个问题，大家知道占位是什么意思，比如让同学在自习室占个座位。
占位符的功能大致也是如此，${}占位符也是为某一个数据结构占据位置。
这个数据结构在上面也提到了，是JavaScript表达式。
二、占位符必要性：
在ES2015之前，如果在字符串中插入一个JavaScript表达式，需要使用如下形式：
let job="web前端开发工程师";
let str1="我是"+job+"，工作5年了";
上面代码将变量job插入到字符串中，需要使用+进行字符串连接。
如果插入的数量较多，或者说较为复杂的操作，那么上面的方式将十分繁琐，不人性化。
再来看一下利用占位符对上面功能的实现，代码实例如下：
let job="web前端开发工程师";
let str2=`我是${job}，工作5年了`;//注意有坑：这里不是单引号，是esc下面的点符号
console.log(str2);
上面代码很自然的利用占位符将变量插入到字符串中。
特别说明：这里的字符串不是普通字符串，而是模板字符串。
以下是案例1全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
<script>
let job="web前端开发工程师";
let str1="我是"+job+"，工作5年了";
let str2=`我是${job}，工作5年了`;//注意大坑：这里不是单引号，是esc下面的点符号
let str3='我是${job}，工作5年了';
console.log(str1);
console.log(str2);
console.log(str3);
</script>
案例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
<script>
let func=(url)=>{
return url;
}
let str = `本站的url地址是${func("www.baidu.com")}`;
console.log(str);//本站的url地址是www.baidu.com
</script>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
