通过JS原型定义字符串格式化方法

初识原型

在python中，我们可以通过format方法来格式化字符串，比如：

>>> s = 'I am {name}'.format(name='Ayhan')>>> s'I am Ayhan'

可是，JavaScript中的String类型并没有内置的格式化方法，那么怎么解决这一问题呢？通过JS原型来为类增加方法。首先我们看一下定义JS原型的基本格式：Object.prototype.method= function () {}

<script>    String.prototype.nb = function (args) {        console.log(args);    };    var name = 'Ayhan';    name.nb(666);</script>

说明：为String类型增加nb方法；实例化一个String对象name，除了String类型固有的方法，name还能调用新增加的nb方法。

准备知识：replace 和 正则

我们知道，格式化字符串其实就是一个匹配和替换的过程。在通过JS原型为String类型新增format方法前，我们先看看JavaScript中字符串对象的replace()方法：

var name="ayhan";"ayhan"name.replace("a", "A")"Ayhan"

除了以上这种常规的replace(old, new)用法外，该方法的new其实还可以是一个回调函数，用该函数的返回值对old进行替换：replace(old, function(){})：

var name = "ayhan";name.replace("a", function () {    return "A";});"Ayhan"

下面我们通过正则来替代old：

var people = "name{ayhan}, age{27}";people.replace(/\{(\w+)\}/g, function (k, v, i) {    console.log(k, v, i);});/* 打印结果{ayhan} ayhan 4{27} 27 16*/

说明：

1. /re/是正则表达式，g是全局匹配；每匹配成功一次，执行一次回调函数；
2. 观察打印结果可以发现，k匹配分组内容， v匹配内容， i索引，其中对我们有用的前两个参数，因此，如果通过第二个参数将内容匹配到，并进行替换，就可以完成字符串{}内容的格式化。

定义format方法

基于以上分析，我们来结合JS原型，replace方法，正则，为String类型新增一个format方法：

<script>    String.prototype.format = function (dict) {        return this.replace(/\{(\w+)\}/g, function (s, i) {            return dict[i];        });    };</script>

说明：

1. 这里的this指调用该方法的对象本身，类似于python类中的self;

2. replace(re, function(){})通过正则匹配字符，并用回调函数的返回值替换字符；

3. format方法接收一个字典dict，用匹配的内容i作为key, 从dict中取值作为replace回调函数的返回值，替换正则匹配的字符。

   
   

使用：

dict = {'name': 'Ayhan', "age": "27"};  var people = "My name is {name}, and i am {age}";people.format(dict);/*"My name is Ayhan, and i am 27"*/

补充：JS面向对象

在JS中，定义类通过如下方式：

var Car = function () {    this.wheels = 4;    this.engines = 2;    this.seats = 1;    this.drive = function () {        console.log('do something');    }};// 或者function Car() {    console.log('此处省略好几行...')}

我们可以在类中定义方法，但是每实例化一个对象：car = new Car()该对象都会拥有类中定义方法的一份拷贝，这样是很占内存的。更好的方法是通过原型来为类扩展方法：

Car.prototype.drive = function() {    console.log('do something');};

更多JS面向对象，参考JavaScript基础二