JavaScript實現(xiàn)格式化字符串函數(shù)String.format

更新時間：2016年12月16日 15:48:53 作者：天碼行空

本文主要介紹了JavaScript實現(xiàn)格式化字符串函數(shù)String.format（可自動解析引號轉義字符）。具有很好的參考價值，需要的朋友一起來看下吧

在js開發(fā)中，我們可能會遇到這樣一個問題

當需要通過js動態(tài)插入html標簽的時候

特別是當遇到大量的變量拼接、引號層層嵌套的情況，會出現(xiàn)轉義字符問題，經(jīng)常出錯

我們來看個例子

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

運行直接報錯

接下來把轉義字符\"改成\'試下

運行之后，發(fā)現(xiàn)仍然無法正常顯示

這樣的代碼不光看起來雜亂無章、難以維護，關鍵是很容易出錯

接下來我們開始封裝格式化字符串方法

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>

看下測試效果