javascript - 字符串格式自定义方法扩展

Question

好的，我从另一篇文章中得到了这段很棒的代码:

String.prototype.format = function (values) {

    var regex = /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g;

    var getValue = function (key) {
        if (values == null || typeof values === 'undefined') return null;

        var value = values[key];
        var type = typeof value;

        return type === 'string' || type === 'number' ? value : null;
    };

    return this.replace(regex, function (match) {
        //match will look like {sample-match}
        //key will be 'sample-match';
        var key = match.substr(1, match.length - 2);

        var value = getValue(key);

        return value != null ? value : match;
    });
};

如果你看一下我的 json 对象，它看起来像这样:

{
    "Id":4019,
    "FileName":"2013-08-24 15.00.15.jpg",
    "ThumbNail":"http://d49aa22b-3476-4fac-8bef-38f53f9378f3.s3.amazonaws.com/2013-08-24 15.00.15_thumb.png",
    "DisplayName":"2013-08-24 15.00.15.jpg",
    "CompanyId":"D49AA22B-3476-4FAC-8BEF-38F53F9378F3",
    "CreatedById":"76026710-ad16-4533-b5fc-47ddd5ab415b",
    "Type":3,
    "DateCreated":"2014-02-11T18:23:07.047",
    "DateModified":"2014-02-11T23:22:31.393",
    "LanguageId":1,
    "Converted":true,
    "Status":1,
    "IsPublic":false,
    "ModifiedById":"132CD2AE-C942-40DA-897E-3D6C5DCB7963",
    "Language":null,
    "Metadata":{
        "AssetId":4019,
        "ReferenceId":"cc68d994c957c0a4",
        "Tags":null,
        "Description":null,
        "Filename":null,
        "FileSize":"1566 kB",
        "FileType":"JPEG",
        "MIMEType":"image/jpeg",
        "CreateDate":"",
        "ModifyDate":"2013:08:24 15:00:15",
        "AddedDate":null,
        "AudioBitRate":null,
        "SampleRate":null,
        "ChannelMode":null,
        "Duration":null,
        "Track":null,
        "Album":null,
        "Year":null,
        "Title":null,
        "Genre":null,
        "Band":null,
        "Composer":null,
        "Artist":null,
        "VideoFrameRate":null,
        "VideoCodec":null,
        "ImageWidth":2448,
        "ImageHeight":3264,
        "ImageSize":"2448x3264",
        "XResolution":null,
        "YResolution":null,
        "ResolutionUnit":null,
        "Orientation":null
    },
    "Company":null,
    "CreatedBy":null,
    "ModifiedBy":null,
    "Comments":null,
    "Ratings":null,
    "Categories":null,
    "Collections":null,
    "SynchronisedAssets":null
}

现在，如果我像这样使用我的函数(项目是 json):

var rowTemplate = "<tr data-id=\"{Id}\"><td>{FileName}</td><td>{FileSize}</td><td></td><td><button type=\"button\" class=\"close\" data-id=\"{Id}\" aria-hidden=\"true\">&times;</button></td></tr>";
var row = rowTemplate.format(item);

我得到的输出如下所示:

<tr data-id="4019"><td>2013-08-24 15.00.15.jpg</td><td>{FileSize}</td><td></td><td><button type="button" class="close" data-id="4019" aria-hidden="true">&times;</button></td></tr>

问题(如果您还看不到它:D)是我也想显示 FileSize，但它位于嵌套的 JSON 对象元数据中。谁能告诉我如何让我的函数与之配合使用？

我尝试了 {Metadata.FileSize} 但也不起作用:(

Answer 1

首先更改正则表达式以支持点(因此 Metadata.FileSize 将匹配)，例如:

/\{([\w-.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g

然后您需要找到该值，例如:

var getValue = function (key) {
    var value = values,
        arr, type;

    if (values == null || typeof values === 'undefined') return null;

    if (key.indexOf('.')) {
        arr = key.split('.');

        while (arr.length && value) {
            value = value[arr.shift()];
        }
    } else {
        value = val && val[key] || values[key];
    }

    type = typeof value;

    return type === 'string' || type === 'number' ? value : null;
};

工作示例: http://jsfiddle.net/tdLKc/

<小时/>

或者使用reduce，例如:

var getValue = function (key) {
    var value = values,
        arr, type;

    if (values == null || typeof values === 'undefined') return null;

    if (key.indexOf('.')) {
        arr = key.split('.');

        value = arr.reduce(function(a, b){
          return a[b];
        }, values);

    } else {
        value = val && val[key] || values[key];
    }
    type = typeof value;

    return type === 'string' || type === 'number' ? value : null;
};

工作示例: http://jsfiddle.net/tdLKc/1/