JavaScript實現格式化字符串函數String.format

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript實現格式化字符串函數String.format

編輯：關於JavaScript

在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://wd.jb51.net:81//201612/yuanma/StringFormat_jb51.rar

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持！

關於JavaScript

JS動態添加Table的TR，TD實現方法: 本文實例講述了JS動態添加Table的TR，TD實現方法。分享給大家供大家參考。具體實現方法如下：復
js中split和replace的用法實例: 本文實例講述了js中split和replace的用法。分享給大家供大家參考。具體分析如下：1. sp
javascript動態創建及刪除元素的方法教程: 本文實例講述了javascript動態創建及刪除元素的方法。分享給大家供大家參考。具體分析如下：在D

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章