有可能这是你第一次看到这么奇怪的文章名称，或许你会疑问：重音符是什么？它和正则表达式有什么关系？其实我和你一样，在写这篇文章前没有接触过这个重音符，更别提它还和正则表达式有关联。
1. 重音符(`)
怎么用键盘打出`呢？其实它就在键盘的左上角，和~一起的那个家伙。
通过js的charCodeAt， 可以得到它的unicode编号：
'`'.charCodeAt() == 96
小写之母a的为97，重音符正好在其前面，在Unicode字符列表上可以看到。
Paste_Image.png
维基百科上，它和编程语言的关系描述如下：
重音符在编程方面有独立（非和其他字元结合）的用途，在此情况又可称为“反引号（backquote）或backtick。
大部分Unix shell以及编程语言如Perl、PHP以及Ruby等都以成对的重音符作指令替代，意思是以某一个 指令的输出结果作为另一个指令的输入项。例如以下指令：
echo It is now `date`
在替代指令后会等如：
echo It is now 日 7月 3 11:31:38 GMT 2016
在正式执行时会产生以下输出结果：
It is now 日 7月 3 11:31:38 GMT 2016
2. 它和正则表达式的关联
一个正则表达式：$`，进行如下的匹配：
"1111da".replace("da", "$`da")
// 结果： "11111111da"
好吧，我们想把一个字符串中的特定字符串替换成别的字符串，结果发现输出的结果比预想中的多...
至于为什么这个正则表达式会出现这个结果，在这边文章里给了一个描述：
$' (dollar followed by an apostrophe or single quote) holds the part of the string after (to the right of) the regex match. $`
(dollar backtick) holds the part of the string before (to the left of) the regex match
我们可以实验可得到如下结果：
"1da2".replace("da", "$'da")
// 结果： "12da2"
3. 问题的来源
在使用webpack+vue进行开发时，我想把js文件写到html文件，使用到了开源的库：lcxfs1991/html-res-webpack-plugin； 但是我发现自己的html模板文件会被写到js程序而报错：
html文件:
<head>
<title>中学单词宝后援团</title>
<% include ./common/header.html %>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
</head>
<body>
...
</body>
js文件：
...
import Vue from 'vue';
...
经过打包后的文件中，script标签中会存放html模板的一份copy：
Paste_Image.png
为此我看了下源码，发现是js代码中含有 '$`'，在进行replace操作时出现了错误：
htmlContent = htmlContent.replace("</body>", scriptContent + "</body>");
为了解决这个问题，加上包中有些地方和现在工程的配置有点不匹配，所以修改后发布了一个新的npm包：liufuhu/html-res-webpack-plugin
网友评论