js 标签字符串中的转义字符使用
铺垫
个人对字符串使用习惯
- 在 es6 以前， js 中字符串使用单引号 , 比如：
str = '<a href="javascript:;">clickMe</a>' - html 中属性值使用双引号
js 怎么处理 零开头的数值类型
首先会 判断是否为 8进制类型数值，如果各进制位上没有大于8 的数字，则当做八进制数值对待， 否则作为 10进制数值对待，即使是10进制数字，在处理过程中还是会把开头 零去掉
如：
num = 032;
console.log(num)
VM77:1 26
var num2 = 08769
undefined
console.log(num2);
VM85:1 8769
1. 标签字符串包裹，报错问题
js 标签字符串中，行内属性值中的字符串转义字符要和标签字符串两端保持一致，不然会报错
// app.innerHTML = "<a href='javascript:;' onclick= 'clickMe(\'hello\')' >clickMe!</a>";
app.innerHTML = '<a href="javascript:;" onclick="clickMe(\"01345\")" >clickMe!</a>';一般有下述错误的时候，需要考虑转义字符串的问题
2. 0 开头的字符串数字拼接问题
(单双引号都是一样的结果)字符串拼接： 直接去除中间拼接的字符串符号
以下两种拼接都会遇到 0消失问题：
var str = "01345"; // 对于这个原本的字符串数字就变成了 八进制数值类型
var singleQoute = '01346';
app.innerHTML = '<a href="javascript:;" onclick="clickMe('+ str +')" >clickMe!</a>';
// app.innerHTML = '<a href="javascript:;" onclick="clickMe('+ singleQoute +')" >clickMe!</a>';
解决方案： 在零开头的字符串数字两侧拼接 “单引号”转义字符
app.innerHTML = '<a href="javascript:;" onclick="clickMe(\''+ str +'\')" >clickMe!</a>';
demo.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js生成html 转义字符问题（单双引号问题）</title>
</head>
<body>
<div id="app"></div>
<script>
var app = document.getElementById('app');
// 第一种： js 标签字符串中，行内属性值中的字符串转义字符要和标签字符串
//两端保持一致，不然会报错
// app.innerHTML = "<a href='javascript:;' onclick= 'clickMe(\'hello\')' >clickMe!</a>";
// app.innerHTML = '<a href="javascript:;" onclick="clickMe(\"01345\")" >clickMe!</a>';
// app.innerHTML = "<a href='javascript:;' onclick= 'clickMe(\"01345\")' >clickMe!</a>";
// app.innerHTML = "<a href='javascript:;' onclick= 'clickMe(\'01345\')' >clickMe!</a>";
// 第二种： (单双引号都是一样的结果)字符串拼接： 直接去除中间拼接的字符串符号
var str = "01345"; // 对于这个原本的字符串数字就变成了 八进制数值类型
var singleQoute = '01346';
// app.innerHTML = '<a href="javascript:;" onclick="clickMe('+ str +')" >clickMe!</a>';
// app.innerHTML = '<a href="javascript:;" onclick="clickMe('+ singleQoute +')" >clickMe!</a>';
// 第三种： 正确写法
// app.innerHTML = '<a href="javascript:;" onclick="clickMe(\''+ str +'\')" >clickMe!</a>';
function clickMe (value) {
console.log(typeof value);
console.log('value---', value);
}
</script>
</body>
</html>