分享自己写的一个js的信息打印程序-前端教程-前军教程网

1、测试代码，保存为【test.html】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="write.js"></script>
</head>

<body>
    <div id="ID1"></div>

    <script>
        writeformat(()=>{
            writeln(1, 2, 3, 4);
            writeln(1, [2, 3], 4);
            writeln({a:1,b:2});
            writeln(1, [2, 3], [4, { a:1, b: { c:1, d:2 }},{a:1,b:2} ]);
            writeln();
        });

        writebr(1, [2, 3], [4, { a:1, b: { c:1, d:2 }},{a:1,b:2} ]);

        document.getElementById("ID1").innerHTML = getWriteHtml(1, [2, 3], [4, { a:1, b: { c:1, d:2 }},{a:1,b:2} ]);

        writeformat(()=>{
            write(getWriteHtmlPretty(1, [2, 3], [4, { a:1, b: { c:1, d:2 }},{a:1,b:2},5 ],6));
        });
    </script>
</body>

</html>

效果如下：

2、源码（保存为 write.js）

//生成打印对象的字符串，方便 document.write
//或者 innerText 和 innerHTML 调用
function getWriteHtml() {
    var args = Array.from(arguments);           //将参数转换成数组
    var strRet = "";

    var isfirst = true;                         //第一个不需要打印逗号
    for(var arg of args) {
        if (!isfirst) { strRet += (","); }  //不是第一个元素全都要打印逗号

        if (arg instanceof Array) {             //如果是数组
            strRet += '['+getWriteHtml(...arg)+']';                      //将 [arg] 转换成  (1,2,3) 的形式，再一次write（递归）
        } else if (arg instanceof Object) {     //如果是对象 { k:v, k:v } 这种形式
            strRet += "{";                         //打印 {
            var isfirst2 = true;                //第一个不需要打印逗号
            for(var k in arg) {                 //循环取 k
                if (!isfirst2) { strRet += (","); } 
                strRet += k + ":" + getWriteHtml(arg[k]);          //打印 k:v => 其中 v 不知道是啥，所以递归调用打印方法
                isfirst2 = false;               //表示后面的都不需要打印逗号了
            }
            strRet += "}";                         //打印 }
        } else strRet += (arg);             //即不是数组，也不是对象，直接打印就是了
        isfirst = false;
    }

    return strRet;
}

function getWriteHtmlPretty() {
    var info = {
        level: 0, newLine: true,
        valColor: '#666',                           //值颜色
        bracketColor: '#a00',                       //括号颜色
        objKeyColor: '#0a0'                         //键值对里的键颜色
    };

    function _getWriteHtmlPretty() {
        var args = Array.from(arguments);           //将参数转换成数组
        var strRet = "";

        var info = args[0];
        var clevel = info.level;
        var spaces = ''.padEnd(clevel, '\t');       //根据级别来计算缩进
        var spaces2 = ''.padEnd(clevel + 1, '\t');  //根据级别来计算缩进


        var isfirst = true;                         //第一个不需要打印逗号
        for(var c=1; c<args.length;c++) {
            var arg = args[c];
            if (!isfirst) { strRet += spaces + ","; }  //不是第一个元素全都要打印逗号

            if (arg instanceof Array) {             //如果是数组
                strRet += `<span style="color:${info.bracketColor}">[</span>${_getWriteHtmlPretty(...[info, ...arg])}<span style="color:${info.bracketColor}">]</span>`;                      //将 [arg] 转换成  (1,2,3) 的形式，再一次write（递归）
            } else if (arg instanceof Object) {     //如果是对象 { k:v, k:v } 这种形式
                info.level++;
                if (info.newLine) { strRet += "\n" + spaces; }
                strRet += `<span style="color:${info.bracketColor}">{</span>\n`;                         //打印 {
                var isfirst2 = true;                //第一个不需要打印逗号
                for(var k in arg) {                 //循环取 k
                    if (!isfirst2) { strRet += ",\n"; }   
                    if (arg[k] instanceof Object) info.newLine = false;
                    strRet += `${spaces2}<span style="color:${info.objKeyColor}">${k}</span>:` 
                            + `${ _getWriteHtmlPretty(...[info, arg[k]])}`;          //打印 k:v => 其中 v 不知道是啥，所以递归调用打印方法
                    info.newLine = true;
                    isfirst2 = false;               //表示后面的都不需要打印逗号了
                }
                strRet += `\n${spaces}<span style="color:${info.bracketColor}">}</span>`;                         //打印 }
                info.level--;
            } else strRet += `<span style='color:${info.valColor}'>${arg}</span>`;             //即不是数组，也不是对象，直接打印就是了
            isfirst = false;
        }

        return strRet;
    }

    var args = [info, ...Array.from(arguments)];           //将参数转换成数组
    return _getWriteHtmlPretty(...args);
}

function write() {
    var html = getWriteHtml(...Array.from(arguments));
    document.write(html);
}

//打印完加个　<br> 标签，html里的换行
function writebr() {                            
    var args = Array.from(arguments);
    write(...args);
    write("<br>");
}

//打印完加个换行符，普通format的换行
function writeln() {
    var args = Array.from(arguments);
    write(...args);
    write("\n");
}

//格式化打印  writeformat(()=>{  这里头调打印函数 });
function writeformat(func) {
    write("<pre>");
    func();
    write("</pre>");
}

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

分享自己写的一个js的信息打印程序