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

在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>

运行直接报错

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

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

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

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

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>

看下测试效果

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

案例下载地址：http://xiazai.jb51.net/201612/yuanma/StringFormat_jb51.rar

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • js中的string.format函数代码

    源于C#中的string.Format() 复制代码 代码如下: String.prototype.format = function(args) { if (arguments.length>0) { var result = this; if (arguments.length == 1 && typeof (args) == "object") { for (var key in args) { var reg=new RegExp ("({&qu

  • javascript下string.format函数补充

    又重新阅读了一遍Andrew的原文,在原文下面的评论中,赫然发现也有人早提出参数个数的问题,同样懒惰的楼猪直接拷贝原文评论答复了一下,同时还发现说漏了很重要的一个注意点Array.prototype.slice.下面统一补充说明一下: 1.string.format的参数个数 在Andrew的原文中,已经有人指出: eric d. Hi, thanks for that brilliant article. Made a lot of things a lot clearer! Note: ne

  • javascript模拟实现C# String.format函数功能代码

    C# string.format这个功能用到的地方比较多, 所以就用js实现了一个简单的版本 : 复制代码 代码如下: String.format = function ()        {            var formatStr = arguments[0]; if ( typeof formatStr === 'string' )            {                var pattern,                    length = argume

  • 为javascript添加String.Format方法

    复制代码 代码如下: String.format = function() { if( arguments.length == 0 ) { return null; } var str = arguments[0]; for(var i=1;i<arguments.length;i++) { var re = new RegExp('\\{' + (i-1) + '\\}','gm'); str = str.replace(re, arguments[i]); } return str; } 使

  • javascript下利用arguments实现string.format函数

    下面摘抄一下源码,深入分析一下他的设计实现思路: 复制代码 代码如下: function format(string) { var args = arguments; var pattern = new RegExp("%([1-" + arguments.length + "])", "g"); return String(string).replace(pattern, function(match, index) { return args

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

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

    在js开发中,我们可能会遇到这样一个问题 当需要通过js动态插入html标签的时候 特别是当遇到大量的变量拼接.引号层层嵌套的情况,会出现转义字符问题,经常出错 我们来看个例子 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; c

  • 关于JS字符串函数String.replace()

    替换匹配给定正则表达式的(一个或多个)子串 string.replace(regexp, replacement) 参数: regexp: RegExp对象或者字符串 replacement: 替换文本的字符串,或者一个函数,用于在调用时生成对应的替换文本. 返回: 返回一个替换好的新字符串 描述: replacement可以是字符串或一个函数.如果是一个函数,它将在每个匹配结果上调用,它返回的字符串将作为替换文本. 传入该函数的参数: 1) 匹配该模式的字符串 2) 匹配该模式中某个圆括号子表

  • Lua中的string库（字符串函数库）总结

    Lua解释器对字符串的支持很有限.一个程序可以创建字符串并连接字符串,但不能截取子串,检查字符串的大小,检测字符串的内容.在Lua中操纵字符串的功能基本来自于string库. 字符串库中的一些函数是非常简单的: string.len(s)          返回字符串s的长度: string.rep(s, n)      返回重复n次字符串s的串:你使用string.rep("a", 2^20)可以创建一个1M bytes的字符串(比如,为了测试需要): string.lower(s)

  • 好用的C++ string Format“函数”介绍

    我这个人总是喜欢在写代码时追求极致,比如总是纠结于变量的命名,内存的消耗,执行的效率,接口的便捷性,代码的可扩展性...但很多时候需要在他们之间做取舍,这就导致我在编码时经常陷入僵局,唉...真是程序员的可悲,为此几年前我还专门将自己的CSDN签名改成了现在这样. 今天我又带来一个函数,相比网上其他版本效率更高(不存在额外拷贝问题),使用更便捷(无需预先分配缓存). 起初我设计的函数如下:相比网上其他的Format,特点是降低了内存消耗,也提升了使用的便捷性,但带来了执行效率的下降,而更严重的是

  • Lua字符串库(string库)学习笔记

    Lua 最强大的特性之一就是它的字符串处理能力,它支持字符格式化输出,具有可扩展的模式匹配查找功能,以及一些实用的字符操作,例如查询.截取.替换和删除等字符串操作,这些字符串操作函数都封装在一个名为 string 的模块里. Lua 里的字符索引是从 1 开始,索引值也可以是负数,这种情况将被解释成向后索引,从字符串末尾开始算起. 下面是 Lua 5.2 提供的字符串操作函数: byte 函数 string.byte 把字符串里的第 i 个字符转为 ASCII编码,默认是输出第一个字符的编码(只

  • C# 格式化字符串的实现代码

    1 前言 如果你熟悉Microsoft Foundation Classes(MFC)的CString,Windows Template Library(WTL)的CString或者Standard Template Library(STL)的字符串类,那么你对String.Format方法肯定很熟悉.在C#中也经常使用这个方法来格式化字符串,比如下面这样: int x = 16; decimal y = 3.57m; string h = String.Format( "item {0} se

  • Javascript日期格式化format函数的使用方法

    前言 Javascript日期格式化在日常开发中还是挺常见的,那么下面就给大家分享Javascript时间格式format函数的两种使用方法示例,一起来看看. 方法一 Date.prototype.pattern=function(fmt) { var o = { "M+" : this.getMonth()+1, //月份 "d+" : this.getDate(), //日 "h+" : this.getHours()%12 == 0 ? 1

  • Python中用format函数格式化字符串的用法

    自python2.6开始,新增了一种格式化字符串的函数str.format(),可谓威力十足.那么,他跟之前的%型格式化字符串相比,有什么优越的存在呢?让我们来揭开它羞答答的面纱. 语法 它通过{}和:来代替%. "映射"示例 通过位置 In [1]: '{0},{1}'.format('kzc',18) Out[1]: 'kzc,18' In [2]: '{},{}'.format('kzc',18) Out[2]: 'kzc,18' In [3]: '{1},{0},{1}'.fo

  • JAVA字符串格式化-String.format()的使用

    本篇介绍JAVA字符串格式化-String.format()的使用,具体如下: 常规类型的格式化 String类的format()方法用于创建格式化的字符串以及连接多个字符串对象.熟悉C语言的同学应该记得C语言的sprintf()方法,两者有类似之处.format()方法有两种重载形式. format(String format, Object... args) 新字符串使用本地语言环境,制定字符串格式和参数生成格式化的新字符串. format(Locale locale, String for

随机推荐