JS中實現(xiàn)簡單Formatter函數(shù)示例代碼

更新時間：2014年08月19日 17:22:52 投稿：whsnow

JS沒有提供方便使用的Formatter函數(shù)，用字符拼接的方式看起來混亂難讀，下面是JS簡單實現(xiàn)版本(沒有嚴格測試)

JS原生并沒有提供方便使用的Formatter函數(shù)，用字符拼接的方式看起來混亂難讀，而且使用起來很不方便。個人感覺C#里提供的語法比較好用，如：

String.Format(“Welcome to learn '{0}','{0}' is awesome,you will {1} it!","Javascript","love");

這種有順序的替換方式，比較清晰，而且在要替換同一內(nèi)容時候可以省去傳遞重復參數(shù)的情況，下面是JS簡單實現(xiàn)版本(沒有嚴格測試):

(function(exports) {
exports.format = function(){
var args = Array.prototype.slice.call(arguments),
sourceStr = args.shift();

function execReplace(text,replacement,index){
return text.replace(new RegExp("\\{"+index+"\\}",'g'),replacement);
}

return args.reduce(execReplace,sourceStr);
}
})(window.utils = window.utils || {});

console.log(utils.format("Welcome to learn '{0}','{0}' is awesome,you will {1} it!","Javascript","love"));

關鍵的是這句：

args.reduce(execReplace,sourceStr);

這里使用了Array的reduce函數(shù),reduce和reduceRight是ES5新增加的函數(shù)，該函數(shù)的參數(shù)是reduce(callback,initialValue)，callback接收4個參數(shù)分別是：

previousValue:

在遍歷第一次進入該回調(diào)函數(shù)時，如果指定了initivalValue將直接使用initivalValue，如果沒有指定將使用數(shù)組的第一個元素
第二次及以后的遍歷該值是前一次遍歷返回的結果
最后一次遍歷返回的結果將作為reduce函數(shù)的返回值
currentValue: 遍歷到的當前item
index: 當前item在數(shù)組中的下標

array: 原始array

在execReplace中每一次執(zhí)行時使用前一次替換后的結果作為原始替換字符串，使用當前item的index作為要被替換的內(nèi)容，依次遍歷，最終完成替換內(nèi)容。

注：reduceRight和reduce函數(shù)基本一樣，只是它的遍歷順序是由右向左

您可能感興趣的文章:

Formatter

bootstrapvalidator之API學習教程
這篇文章為大家分享了bootstrapvalidator之API學習教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
js實現(xiàn)文字垂直滾動和鼠標懸停效果
這篇文章主要介紹了js實現(xiàn)文字垂直滾動和鼠標懸停效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-12-12
詳解JavaScript模塊化開發(fā)
一個模塊就是實現(xiàn)特定功能的文件，有了模塊，我們就可以更方便地使用別人的代碼，想要什么功能，就加載什么模塊。模塊開發(fā)需要遵循一定的規(guī)范，否則就都亂套了
2016-12-12
DOM事件探秘篇
本文主要介紹了DOM事件的相關知識。具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
javascript中Number對象的toString()方法分析
這篇文章主要介紹了javascript中Number對象的toString()方法,較為詳細的分析了toString()方法的用法及注意事項,非常具有實用價值,需要的朋友可以參考下
2014-12-12
antd upload控件的data參數(shù)使用
這篇文章主要介紹了antd upload控件的data參數(shù)使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-02-02
js如何判斷不同系統(tǒng)的瀏覽器類型
正如標題所言使用js如何判斷不同系統(tǒng)的瀏覽器類型，下面有個不錯的示例，感興趣的朋友可以參考下
2013-10-10
js實現(xiàn)簡易聊天對話框
這篇文章主要為大家詳細介紹了js實現(xiàn)簡易聊天對話框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
微信小程序?qū)崿F(xiàn)一鍵登錄
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)一鍵登錄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
JS實現(xiàn)Excel導出功能以及導出亂碼問題解決詳解
這篇文章主要為大家詳細介紹了JavaScript如何調(diào)用后臺接口實現(xiàn)Excel導出功能以及導出亂碼問題的解決辦法，需要的小伙伴可以參考一下
2023-07-07