${}占位符用法

${}占位符需要和模板字符串配合使用。

ES2015新增此语法结构。

 

浏览器支持：

（1）.IE9+浏览器支持占位符。

（2）.edge浏览器支持占位符。

（3）.火狐浏览器支持占位符。

（4）.谷歌浏览器支持占位符。

（5）.opera浏览器支持占位符。

（6）.safria浏览器支持占位符。

上面已经对占位符做了简单的介绍，但是还需要明晰如下两个问题：

一.什么是占位符：

首先解决第一个问题，大家知道站位是什么意思，比如让同学在自习室占个座位。

占位符的功能大致也是如此，${}占位符也是为某一个数据结构占据位置。

 

二.占位符必要性：

在ES2015之前，如果在字符串中插入一个JavaScript表达式，需要使用如下形式：

 

1 2	let address="北京"; let str="船长位于"+address+"，哈哈哈"

上面代码将变量address插入到字符串中，需要使用+进行字符串连接。

如果插入的数量较多，或者说较为复杂的操作，那么上面的方式将十分繁琐，不人性化。

再来看一下利用占位符对上面功能的实现，代码实例如下：

1 2 3

let address="北京"; let str=`船长位于${address}，哈哈哈`; console.log(str);

代码运行效果截图如下：

船长位于北京，哈哈哈

 

上面代码很自然的利用占位符将变量插入到字符串中。

特别说明：这里的字符串不是普通字符串，而是模板字符串。

 

1 2 3 4 5

let func=(url)=>{   return url; } let str = `本站的url地址是${func("https://www.cnblogs.com/watermelons")}`; console.log(str);

代码运行效果截图如下：

本站的url地址是https://www.cnblogs.com/watermelons

 

占位符中的表达式是对函数的调用，函数返回一个字符串。

 

1 2 3

let arr = ["是", "船", "长", "啊"]; let str = `${arr}`; console.log(str);

代码运行效果截图如下：

是，船，长，啊

 

输出值是"是，船，长，啊"，可能会有朋友对这个结果有疑问。

占位符中是数组，但是这个数组所处的上下文环境是字符串。

那么就隐身调用toString方法将其转换为字符串。