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与css打造个性化的单选框和复选框
Oct 20 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
javascript和jquery实现用户登录验证
May 04 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 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 开源框架22个简单简介
2009/08/24 PHP
php中计算时间差的几种方法
2009/12/31 PHP
php curl 伪造IP来源的实例代码
2012/11/01 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
JS array 数组详解
2009/03/22 Javascript
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
Python使用functools实现注解同步方法
2018/02/06 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
个人自查自纠材料
2014/10/14 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang