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

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

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

在js開(kāi)發(fā)中，我們可能會(huì)遇到這樣一個(gè)問(wèn)題

當(dāng)需要通過(guò)js動(dòng)態(tài)插入html標(biāo)簽的時(shí)候

特別是當(dāng)遇到大量的變量拼接、引號(hào)層層嵌套的情況，會(huì)出現(xiàn)轉(zhuǎn)義字符問(wèn)題，經(jīng)常出錯(cuò)

我們來(lái)看個(gè)例子

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

運(yùn)行直接報(bào)錯(cuò)

接下來(lái)把轉(zhuǎn)義字符\"改成\'試下

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

這樣的代碼不光看起來(lái)雜亂無(wú)章、難以維護(hù)，關(guān)鍵是很容易出錯(cuò)

接下來(lái)我們開(kāi)始封裝格式化字符串方法

String.js

(function () {
 /// <summary>
 /// 引號(hào)轉(zhuǎn)義符號(hào)
 /// </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);
 }
})();

通過(guò)占位符傳遞變量值，用%替代了引號(hào)轉(zhuǎn)義符，代碼簡(jiǎn)潔了很多，也非常方便維護(hù)，出錯(cuò)的機(jī)率也小了很多

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

看下測(cè)試效果