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>