脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript string.format

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

 更新时间：2016年12月16日 15:48:53   作者：天碼行空  
本文主要介绍了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

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

您可能感兴趣的文章:

相关文章

  • JavaScript电子时钟倒计时第二款

    JavaScript电子时钟倒计时第二款

    这篇文章主要介绍了JavaScript电子时钟倒计时的实现代码，具有一定的参考价值，感兴趣的朋友可以参考一下
    2016-01-01
  • 微信小程序实现图片放大预览功能

    微信小程序实现图片放大预览功能

    这篇文章主要为大家详细介绍了微信小程序实现图片放大预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-11-11
  • Typescript中类型兼容的实现

    Typescript中类型兼容的实现

    在TypeScript 编程中,类型兼容是最基础的一道检查机制,一旦代码中出现类型不兼容的表达式,编译就会失败,本文主要介绍了Typescript中类型兼容的实现,感兴趣的可以了解一下
    2023-12-12
  • 继续学习javascript闭包

    继续学习javascript闭包

    这篇文章主要还是继续学习javascript闭包，理解JavaScript的闭包是迈向高级JS程序员的必经之路，需要的朋友可以参考下
    2015-12-12
  • JavaScript中的DOM遍历详解

    JavaScript中的DOM遍历详解

    文档对象模型 (DOM) 表示 HTML 文档的结构,导航或“遍历”此结构是 Web 开发的基本方面,使开发人员能够在网页上选择、修改、删除或添加内容,本文深入研究了使用 JavaScript 进行 DOM 遍历的艺术,提供了一个强大的工具包来处理各种遍历场景
    2023-09-09
  • element plus表格的表头和内容居中的实现代码

    element plus表格的表头和内容居中的实现代码

    这篇文章主要介绍了element plus表格的表头和内容居中的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • js实现文字无缝向上滚动

    js实现文字无缝向上滚动

    本文主要分享了js实现文字无缝向上滚动的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • echarts图表设置宽度100%结果为100px的解决办法

    echarts图表设置宽度100%结果为100px的解决办法

    在开发一个前端项目时需要用到Element-ui的el-tabs组件和Echart开源库,当两者嵌套使用时,我给Echart中的图表宽度设置为了100%,但是实际的宽度却只有100px,这篇文章主要给大家介绍了关于echarts图表设置宽度100%结果为100px的解决办法,需要的朋友可以参考下
    2022-12-12
  • js Cannot set properties of null(setting ‘onclick‘)问题分析

    js Cannot set properties of null(se

    今天增加功能的时候，提示Uncaught TypeError: Cannot set properties of null (setting onclick)问题分享下,需要的朋友可以参考下
    2023-06-06
  • js正则表达式replace替换变量方法

    js正则表达式replace替换变量方法

    这篇文章主要介绍了js正则表达式/replace替换变量方法 ,最近项目任务繁重，更新博客会较慢，不过有时间希望可以把自己的积累分享出来，需要的朋友可以参考下
    2016-05-05

最新评论