JavaScript实现格式化字符串函数String.format 在js开发中，我们可能会遇到这样⼀个问题
当需要通过js动态插⼊html标签的时候
特别是当遇到⼤量的变量拼接、引号层层嵌套的情况，会出现转义字符问题，经常出错
我们来看个例⼦
<!DOCTYPE html>
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
var id = '1';
var code = 'zhangsan';
var name = '张三';
}
function buttonClick(id, code) {
alert(id + '-' + code);
}
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
运⾏直接报错
接下来把转义字符\"改成\'试下
运⾏之后，发现仍然⽆法正常显⽰
这样的代码不光看起来杂乱⽆章、难以维护，关键是很容易出错
字符串函数例子接下来我们开始封装格式化字符串⽅法
String.js
(function () {
/// <summary>
/// 引号转义符号
/// </summary>
String.EscapeChar = '\'';
/// <summary>
/// 替换所有字符串
/
// </summary>
/// <param name="searchValue">检索值</param>
/// <param name="replaceValue">替换值</param>
placeAll = function (searchValue, replaceValue) {
var regExp = new RegExp(searchValue, "g");
place(regExp, replaceValue);
}
/// <summary>
/// 格式化字符串
/// </summary>
String.prototype.format = function () {
var regexp = /\{(\d+)\}/g;
var args = arguments;
var result = place(regexp, function (m, i, o, n) {
return args[i];
});
placeAll('%', String.EscapeChar);
}
})();
通过占位符传递变量值，⽤%替代了引号转义符，代码简洁了很多，也⾮常⽅便维护，出错的机率也⼩了很多<!DOCTYPE html>
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="String.js"></script>
<script>
var id = '1';
var code = 'zhangsan';
var name = '张三';
function buttonClick(id, code) {
alert(id + '-' + code);
}
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
看下测试效果
测试结果正确，并且点击事件中也正确接收到了参数值
以上就是本⽂的全部内容，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，同时也希望多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。