通过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基础二