使用toString()时如何格式化函数体

Question

假设我从缩小的 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('Lorem');console.log('Ipsum');}

无论如何都要这样做？

Answer 1

JavaScript 没有内置函数来执行此操作。因此，如果您想以编程方式进行漂亮的打印，则必须手动执行。 要获取该函数的源代码，有一个非标准的

Function.prototype.toSource()

函数，但仅 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 开发工具：

Answer 2

有一个

js-beautify

库，它在漂亮地打印 JS 代码方面做得非常好

http://jsbeautifier.org/

https://github.com/beautify-web/js-beautify

// 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');
}

Answer 3

Prettier 是一个现代库，现在常用于代码格式化，也可以做到这一点：

• https://prettier.io/docs/en/api
• https://prettier.io/docs/en/browser

---

这不是问题的直接答案，但我实际上是在查看这里的答案，以了解如何在 HTML 中格式化函数的

.toString()

，并且刚刚发现我可以通过在 HTML 上设置

white-space: pre-wrap;

来保留现有的空白显示它的元素。

我没有仔细阅读，没有注意到这个问题是指缩小源代码并专门打印到控制台，并花了一些时间尝试使用 Prettier 并将其输出到 HTML，然后意识到我明显的错误。也许这个技巧会帮助其他像我一样混淆这个问题的人。