如何在旧版JavaScript中将字典对象转换为HTML属性列表

你现有代码存在几个明确问题：一是用了ES6默认参数语法，旧JS环境无法解析；二是没有做HTML实体转义，属性值含双引号、&符号时会直接破坏HTML结构；三是没有过滤原型链属性，可能输出预期外的内容；四是数组直接拼接时，若数组元素含特殊字符不会被转义。
下面是兼容所有旧JS环境、符合HTML规范的实现：

function arg(d) {
    d = d || {};
    var attrs = [];
    var escapeChars = {
        '&': '&',
        '"': '"',
        '<': '&lt;',
        '>': '&gt;'
    };
    function escapeVal(str) {
        return String(str).replace(/[&"<>]/g, function(char) {
            return escapeChars[char];
        });
    }
    for (var key in d) {
        if (!d.hasOwnProperty(key)) continue;
        var value = d[key];
        if (Object.prototype.toString.call(value) === '[object Array]') {
            var arrItems = [];
            for (var i = 0; i < value.length; i++) {
                arrItems.push(escapeVal(value[i]));
            }
            value = arrItems.join(',');
        } else {
            value = escapeVal(value);
        }
        attrs.push(key + '="' + value + '"');
    }
    return attrs.join(' ');
}

逻辑说明 #

• 用d = d || {}替代ES6默认参数，兼容ES3及以上所有JS运行环境
• 转义逻辑覆盖HTML双引号属性要求转义的所有特殊字符，从根本上避免属性值破坏标签结构的问题
• 遍历属性时通过hasOwnProperty判断，只处理对象自身的属性，过滤原型链上继承的可枚举属性
• 数组类型单独处理：先对每个数组元素做转义再拼接逗号，避免数组元素带特殊字符时转义失效
• 所有值先转成字符串再处理，避免null、undefined、数字类型值拼接时出现非预期结果

效果验证 #

传入示例对象：

var sneed = { feed: "and", seed: [ "formerly", "chucks" ] };
arg(sneed);

输出完全符合要求：

feed="and" seed="formerly,chucks"

传入带双引号的特殊值测试：

arg({ desc: 'say "hello" & welcome' });

输出合法HTML属性：

desc="say "hello" & welcome"

内容的提问来源于stack exchange，提问作者Anon