JavaScript实现格式化字符串函数String.format


Posted in Javascript onDecember 16, 2016

在js开发中,我们可能会遇到这样一个问题

当需要通过js动态插入html标签的时候

特别是当遇到大量的变量拼接、引号层层嵌套的情况,会出现转义字符问题,经常出错

我们来看个例子

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <script>
 window.onload = function () {
 var id = '1';
 var code = 'zhangsan';
 var name = '张三';
 document.getElementById('test').innerHTML = '<a href="#" onclick="buttonClick(\"' + id + '\",\"' + code + '\">' + name + '</a>';
 }
 function buttonClick(id, code) {
 alert(id + '-' + code);
 }
 </script>
</head>
<body>
 <div id="test"></div>
</body>
</html>

运行直接报错

JavaScript实现格式化字符串函数String.format

接下来把转义字符\"改成\'试下

运行之后,发现仍然无法正常显示

这样的代码不光看起来杂乱无章、难以维护,关键是很容易出错

接下来我们开始封装格式化字符串方法

String.js

(function () {
 /// <summary>
 /// 引号转义符号
 /// </summary>
 String.EscapeChar = '\'';
 /// <summary>
 /// 替换所有字符串
 /// </summary>
 /// <param name="searchValue">检索值</param> 
 /// <param name="replaceValue">替换值</param> 
 String.prototype.replaceAll = function (searchValue, replaceValue) {
 var regExp = new RegExp(searchValue, "g");
 return this.replace(regExp, replaceValue);
 }
 /// <summary>
 /// 格式化字符串
 /// </summary>
 String.prototype.format = function () {
 var regexp = /\{(\d+)\}/g;
 var args = arguments;
 var result = this.replace(regexp, function (m, i, o, n) {
 return args[i];
 });
 return result.replaceAll('%', String.EscapeChar);
 }
})();

通过占位符传递变量值,用%替代了引号转义符,代码简洁了很多,也非常方便维护,出错的机率也小了很多

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <script src="String.js"></script>
 <script>
 window.onload = function () {
 var id = '1';
 var code = 'zhangsan';
 var name = '张三';
 document.getElementById('test').innerHTML = '<a href="#" onclick="buttonClick(%{0}%,%{1}%)">{2}</a>'.format(id, code, name);
 }

 function buttonClick(id, code) {
 alert(id + '-' + code);
 }
 </script>
</head>
<body>
 <div id="test"></div>
</body>
</html>

看下测试效果

JavaScript实现格式化字符串函数String.format

测试结果正确,并且点击事件中也正确接收到了参数值

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js的回调函数详解
Jan 05 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 #Javascript
JS搜狐面试题分析
Dec 16 #Javascript
JS重载实现方法分析
Dec 16 #Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 #Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 #Javascript
js继承实现方法详解
Dec 16 #Javascript
详解jQuery简单的表格应用
Dec 16 #Javascript
You might like
php中防止伪造跨站请求的小招式
2011/09/02 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
php抽象类用法实例分析
2015/07/07 PHP
js静态方法与实例方法分析
2011/07/04 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
Python 面向对象 成员的访问约束
2008/12/23 Python
微信跳一跳python代码实现
2018/01/05 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
python版大富翁源代码分享
2018/11/19 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
python对Excel的读取的示例代码
2020/02/14 Python
win10安装python3.6的常见问题
2020/07/01 Python
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
给老师的一封建议书
2014/03/13 职场文书
团拜会策划方案
2014/06/07 职场文书
授权委托书协议书
2014/10/16 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
中学生逃课检讨书
2015/02/17 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python
Python采集壁纸并实现炫轮播
2022/04/30 Python