javascript - 如何使用 string.format 动态生成 jquery 的第 n 个参数

Question

我正在尝试用受尊重的值替换元素占位符，这对于硬编码来说效果很好，如 snippet 1 中所示，

我需要使其适用于动态查找snippet 2,3。即，如果两个变量uiStructure、arrItem都是动态生成的，那么如何处理它。

<强> JS FIDDLE

代码片段 1:

var uiStructure = "<div class='cntHolder'><h1>{0}<h1><div class='descDiv'>{1}</div></div>";
var arrItem = [];
    arrItem[0] = "label";
    arrItem[1] = "desc";

for (var i = 0; i < vWork.length; i++) {
 // how to set this dynamically, depend on arrItem 
  var getData = String.format(uiStructure, vWork[i].label, vWork[i].desc); 
  console.log(getData);
}

<小时/>

if (!String.format) {
                String.format = function (format) {
                    var args = Array.prototype.slice.call(arguments, 1);
                    return format.replace(/{(\d+)}/g, function (match, number) {
                        return typeof args[number] != 'undefined' ? args[number] : match;
                    });
                };
            }

<小时/>

动态生成，有多种可能性，如下所示:

代码片段 2:

var uiStructure = "<div class='cntHolder'><div class='imgDiv'>
<img src='{0}' alt='pic' /></div><div class='descDiv'>{1}</div>
<span>{2}</span> </div>";
var arrItem = [];
    arrItem[0] = "badge";
    arrItem[1] = "desc";
    arrItem[2] = "tagline";

代码片段 3:

var uiStructure = "<div class='cntHolder'><div class='imgDiv'><img src='{0}' alt='pic' 
/></div><div class='descDiv'>{1}</div></div>";
var arrItem = [];
    arrItem[0] = "badge";
    rrItem[1] = "desc";



  var vWork = [
            {

                label: "CEO",
                desc: "Higher Command",
                tagline: "The boss ",
                priority: "High",
                badge: "../01;jpg"
            },
            {
                label: "Developer",
                desc: "Programming developer",
                tagline: "Developer rocks",
                priority: "Medium",
                badge: "../02;jpg"
            },
            {
                label: "HR",
                desc: "Human resource",
                tagline: "Developer hate HR",
                priority: "Medium",
                badge: "../03;jpg"
            },
            {
                label: "Chairman",
                desc: "Boss of Boss",
                tagline: "no tagline available lol",
                priority: "Very High",
                badge: "../04;jpg"
            }
        ];

Answer 1

尝试使用这种方法来获取动态属性名称:

for (var i = 0; i < vWork.length; i++) {
    var props = arrItem.map(function(prop) {
        return vWork[i][prop];
    });
    var getData = String.format.apply(null, [uiStructure].concat(props));
    console.log(getData);
}

它是如何工作的。您有一个键数组 arrItem。在每次迭代中，您都希望获得 vWork[i] 的相应值。 Array.prototype.map允许您将键数组转换(它实际上返回新数组)为来自 vWork 的值数组。所以 props 看起来像这样:

["Chairman", "Boss of Boss"] 

最后你使用Function.prototype.apply因为您想调用 String.format 函数，以数组形式提供参数。

演示:http://jsfiddle.net/7q3znvqk/2/