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 相关文章推荐
jQuery制作拼图小游戏
Jan 12 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 Javascript
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
详解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
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
php计算函数执行时间的方法
2015/03/20 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
简单介绍Python中的RSS处理
2015/04/13 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
Python 备份程序代码实现
2017/03/06 Python
python用户管理系统的实例讲解
2017/12/23 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
数字天堂软件测试面试题
2012/12/23 面试题
课外活动实习计划
2015/01/19 职场文书
计划生育目标责任书
2015/05/09 职场文书