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的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
javascript中scrollTop详解
Apr 13 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
js调用屏幕宽度的简单方法
Nov 14 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 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/01/17 PHP
PHP获取url的函数代码
2011/08/02 PHP
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
JavaScript类和继承 prototype属性
2010/09/03 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
requireJS使用指南
2016/04/27 Javascript
基于javascript数组实现图片轮播
2016/05/02 Javascript
详解如何较好的使用js
2016/12/16 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
Python实现的二维码生成小软件
2014/07/11 Python
Python中的面向对象编程详解(下)
2015/04/13 Python
Python实现二分查找算法实例
2015/05/26 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
python 写一个性能测试工具(一)
2020/10/24 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
三查三看党性分析材料
2014/02/18 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书