Javascript 使用toString()时如何格式化函数体
假设我从一个缩小的JavaScript文件中得到了这个函数:Javascript 使用toString()时如何格式化函数体,javascript,formatting,google-chrome-devtools,firebug,console.log,Javascript,Formatting,Google Chrome Devtools,Firebug,Console.log,假设我从一个缩小的JavaScript文件中得到了这个函数: function fn(){console.log('Lorem');console.log('Ipsum');} 我想在打电话时得到一个漂亮的打印缩进版本: console.log(fn.toString()); 预期产出: function fn() { console.log('Lorem'); console.log('Ipsum'); } 而不是: function fn(){console.log('
function fn(){console.log('Lorem');console.log('Ipsum');}
我想在打电话时得到一个漂亮的打印缩进版本:
console.log(fn.toString());
预期产出:
function fn() {
console.log('Lorem');
console.log('Ipsum');
}
而不是:
function fn(){console.log('Lorem');console.log('Ipsum');}
无论如何都要这样做吗?JavaScript没有内置函数来完成此操作。因此,如果您想以编程方式进行漂亮的打印,就必须手动进行。 要获取函数的源代码,有一个非标准函数,但它只受Firefox支持。涵盖您的示例的一个非常简单的漂亮打印函数是:
function prettyPrint(source) {
let formattedSource = fn.toSource ? fn.toSource() : "";
// Add line breaks after curly braces and semicolons
formattedSource = formattedSource.replace(/([{};])/g, "$1\n");
// Add space after opening curly brace
formattedSource = formattedSource.replace(/(\S)\{/g, "$1 {");
// Indent lines ending with a semicolon
formattedSource = formattedSource.replace(/^(.*?);/gm, " $1;");
return formattedSource;
}
console.log(prettyPrint(fn));
如上所述,不同的开发工具都集成了一些选项,可以在调试器中漂亮地打印JavaScript源代码
萤火虫:
Firefox开发工具:
Chrome开发工具:
有一个
js-beautify
库,它在漂亮地打印js代码方面做得非常好
// Script inclusion
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET', 'https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.4/beautify.js', false);
xmlHttp.send(null);
var jsCode = xmlHttp.responseText;
var script = document.createElement("script");
script.innerHTML = jsCode;
document.head.appendChild(script);
// Usage
function fn(){console.log('Lorem');console.log('Ipsum');}
js_beautify(fn.toString());
// Output
function fn() {
console.log('Lorem');
console.log('Ipsum');
}