重音符(`)和正则表达式

有可能这是你第一次看到这么奇怪的文章名称，或许你会疑问：重音符是什么？它和正则表达式有什么关系？其实我和你一样，在写这篇文章前没有接触过这个重音符，更别提它还和正则表达式有关联。

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文件:

    
    <% include ./common/header.html %>
    


    ...

js文件：

  ...
  import Vue from 'vue';
  ...

经过打包后的文件中，script标签中会存放html模板的一份copy：

Paste_Image.png

为此我看了下源码，发现是js代码中含有 '$`'，在进行replace操作时出现了错误：

  htmlContent = htmlContent.replace("", scriptContent + "");

为了解决这个问题，加上包中有些地方和现在工程的配置有点不匹配，所以修改后发布了一个新的npm包：liufuhu/html-res-webpack-plugin

4. 参考文献

重音符的维基百科