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
}

现在，如果我像这样使用我的函数（item是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/

Answer 2

String.prototype.format = function（values）{

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

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

var getValue = function (key) 
    {
    var i, l, value, type, referrer;

    if (key.indexOf (".")>-1)
       {
       key=key.split(".");
       l=key.length;
       referrer=values;
       for (i=0;i<l;i++)
         referrer=referrer[key[i]];
       value=referrer;
       }
    else
      value = values[key];
    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;
});

};

Answer 3

这是我的解决方案，我定义了正确获取数据并提高效率的路径。

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

并编辑格式：

String.prototype.format = function (values) {

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

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

    var keydata = key.split('.');
    var  data, type
        ,num =  keydata.length;        


    while(keydata.length){
        value = (num == keydata.length) 
        ? values[keydata.shift()] 
        : value[keydata.shift()];            
    }       
        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';
    console.log('match',match);
    var key = match.substr(1, match.length - 2);

    var value = getValue(key);

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

在一个对象中，你可能拥有相同的键名，并且唯一的方法可以帮助你避免它是设计对象格式没有任何attrs的名字是一样的。它可能会成为一种噩梦，例如：{a：{b：{'FileSize'：'hell year'}}} 在你的JSON中我看到2个attrs有相同的名字，但是你用小写字母（文件* N * ame和文件* n * ame）使它不同，你是为了避免错误的吸引力，不是吗？

jsfiddle：http://jsfiddle.net/scX3f/1/ 如果它困扰你，请为我可怕的英语道歉:)。

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

3 个答案: