快捷導(dǎo)航

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

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

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

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

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

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

(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"));

關(guān)鍵的是這句：

args.reduce(execReplace,sourceStr);

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

previousValue:

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

array: 原始array

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

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

您可能感興趣的文章:

Formatter

相關(guān)文章

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