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转义字符

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

常见的编程语言的字符表