JS转换转义字符

这周在开发后端系统的时候,遇到了需要将后端传过来的转义字符进行转义然后再渲染到html中,因为之前也没有遇到过,所以研究了研究,记录一下。

记得上大学时候学习C语言就有提到过转义字符,比如\n表示回车,\t表示水平制表符等等。其实所有编程语言都有转移字符,转移字符出现的原因基本上就两点:

  1. 使用转义字符来表示字符集中定义的字符,比如ASCll里面的控制字符及回车换行等字符,这些字符都没有现成的文字代号。所以只能用转义字符来表示
  2. 某一些特定的字符在编辑语言中被定义为特殊用途的字符。这些字符由于被定义为特殊用途,它们失去了原有的意义。例如在html中,<被HTML定义为标签的开始,所以当我们转入<时,HTML就会把它当作为开始,而不是当作一个<来看待

由于不同的语言关键字不同,例如在一般的编程语言中,"会被当作代码的一部分,但是在html中它会被直接渲染,再如常见的编程语言中\n表示回车,但是在html中<br>表示回车

这就导致了如果后端返回的是想要在前端展示的一段代码,则必然会包含转移字符,而这些转义字符html是无法识别的

解决——js转换转义字符

由于html与js所用的转义字符不同所以导致了无法正常渲染,所以需要在js中先将转义字符转换,然后在渲染到html中,在js中转换转义字符常用的有两种方法:

  • eval()
  • JSON.parse()

eval()函数会将传入的字符串当做JavaScript代码进行执行。这个函数一般是不推荐使用的,因为他执行的代码拥有着执行者的权利。如果用eval()运行的字符串代码被恶意方操控修改,可能会利用最终在用户机器上运行恶意方部署的恶意代码,并导致失去对网页或者扩展程序的权限。所以这种方法是不推荐的

JSON.parse()方法用来解析JSON字符串,构造由字符串描述的JavaScript值或对象,经过这个转换,由于代码的执行,转义字符会被自动转义,从而拿到我们想要的效果,但是使用这个方法解析的时候需要注意一点:必须组合成JSON字符串,所以我们需要将拿到的数据进行包装:

1
2
3
4
decodeValueFun(value) {
const decodeValue = JSON.parse(`{"key":${value}}`);
return decodeValue.key;
},

这样返回的数据就是经过转义的数据了

疑问🤔️

在实际测试的时候发现,如果将后端返回的数据直接贴入前端js代码中然后去直接展示到页面中,转义字符会被自动识别,但是如果将后端返回的字符串直接渲染到html页面中,则字符串中的转义字符直接被当作字符串处理,这说明在js使用字符串的时候已经将转义符自动转义,不知道这个是什么原因。

附:

常见的HTML转义字符

字符 十进制 转义字符
&#34; &quot;
& &#38; &amp;
< &#60; &lt;
> &#62; &gt;
不断开空格(non-breaking space) &#160; &nbsp;

更多html转义字符见链接:http://tool.oschina.net/commons?type=2

常见的编程语言的字符表

转义字符 意义 ASCII码值(十进制)
\a 响铃(BEL) 007
\b 退格(BS) ,将当前位置移到前一列 008
\f 换页(FF),将当前位置移到下页开头 012
\n 换行(LF) ,将当前位置移到下一行开头 010
\r 回车(CR) ,将当前位置移到本行开头 013
\t 水平制表(HT) (跳到下一个TAB位置) 009
\v 垂直制表(VT) 011
\\ 代表一个反斜线字符’’\’ 092
\' 代表一个单引号(撇号)字符 039
\" 代表一个双引号字符 034
\? 代表一个问号 063
\0 空字符(NULL) 000
\ooo 1到3位八进制数所代表的任意字符 三位八进制
\xff 1到2位十六进制所代表的任意字符 二位十六进制