JavaScript 格式化器

2025 年 4 月 21 日 | 阅读 5 分钟

在本文中，我们将学习 JavaScript 格式化工具。

什么是格式化工具？

格式化工具是一种用于删除 JavaScript 代码中多余空格的工具。它有助于减小代码的体积，从而减小数据量，便于数据传输。它为整个代码提供所需的缩进和修改。代码格式化有助于提高代码的可读性和可重用性。

它将混乱的JS 代码简化为结构良好的格式。它可以调试 JS 代码，即无缝查找和修复错误，并有助于轻松显示代码块。结构良好的代码易于维护，从而节省时间和精力。

一些代码编辑器包含内置的 JavaScript 格式化工具。

JavaScript 格式化工具的演示

我们将了解 JavaScript 格式化工具的演示。

演示 1

我们将编写代码来演示格式化工具，用户可以使用该工具格式化 HTML 文本。我们可以使用不同的标签为 HTML 元素赋予不同的功能。在下面的示例中，我们将把段落向右对齐。

代码

<!DOCTYPE html>
<html lang="en">
<body>
<p> This paragraph can be edited and altered. </p>
<p align= "Right"> This paragraph can be edited and aligned towards the right. </p>
<p><b>The font of the paragraph can also be altered.</b></p>
<p><font color="brown">The Font color can also be formatted.</font></p>
</body>
</html>

输出

我们可以看到下面的输出。

演示 2

我们将编写代码来演示基于 JavaScript 的文本的字符串格式，并在按下提交按钮时将字符串格式修改为斜体。

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
  </head>
<body>
<p>Click on the button to see the string format in italics</p>
<button onclick="Func()">Submit</button>
<p id="para"></p>
<script>
function Func() {
var text = "Hello there, how are you?";
var result = text.italics();
document.getElementById("para").innerHTML = result;
}
</script>
</body>
</html>

输出

我们可以看到下面的输出。

演示 3

我们将创建一个程序，其中我们将显示变量并使用 JavaScript 短日期格式构建一个新日期。

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>JavaScript Date</title>
</head>
<body>
<h2>JavaScript Date</h2>
<p id="demo"></p>
<script>
var d = new Date("06/01/2024");
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>

输出

我们可以看到下面的结果。

演示 4

我们将创建一个 JavaScript 程序，其中我们将显示字符串格式化工具的长度及其属性。

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>JavaScript String Formatter Length</title>
</head>
<body>
<h2>JavaScript String Formatter Length</h2>
<p>Length of the string.</p>
<p id="dm2"></p>
<script>
var s = "Hi there.";
var l = s.length;
document.getElementById("dm2").innerHTML = l;
</script>
</body>
</html>

输出

我们可以看到下面的输出。

演示 5

我们将创建一个程序，其中我们将使用 ECMA Script 短日期格式来显示 JavaScript 格式化。

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Object Property</title>
</head>
<body>
<h2>JavaScript Object Property</h2>
<p>Change in the Object's Property value.</p>
<p id="demo"></p>
<script>
var emp = {
employee_Name: "Anu",
employee_id: 18,
employee_dept: "CSE",
employee_salary: 25000
};
Object.defineProperty(emp, "employee_salary", {value:25000})
document.getElementById("demo").innerHTML = emp.employee_salary;
</script>
</body>
</html>

输出

我们可以看到下面的输出。

JavaScript 格式化工具的用途

它提高了代码的可读性和理解性。格式良好的 JavaScript 代码易于理解。处理同一代码的开发人员可以轻松理解代码逻辑。
它有助于调试，这意味着它可以轻松找到并修复问题。
格式良好的代码易于维护，因为它节省了更新代码所需的时间和精力。

JavaScript 格式化工具

以下是用于格式化 JavaScript 的 JavaScript 格式化工具：

Prettier

它是一个代码格式化工具，支持 HTML、JavaScript、Angular、TypeScript、Java、Ruby、XML、PHP 等多种编程语言。

它用于美化代码，使代码可读且整洁。有许多编辑器支持 Prettier 格式化工具，例如 Sublime Text、VS Code、Espresso 等。它是一个无 bug 且快速的格式化工具。它可以一次格式化整个代码。

FreeFormatter-JavaScript 美化器

FreeFormatter 是面向开发人员的免费在线工具提供商。它提供了各种工具来帮助开发人员构建最佳代码，例如 HTML 格式化工具、XML 格式化工具、JSON 格式化工具等。它还提供了一个名为 JavaScript Beautifier 的工具，用于格式化 JS 代码。

它可以根据您选择的缩进级别格式化 JavaScript 文件。它包含四种缩进级别：制表符、四个空格、三个空格和两个空格。它提供了各种花括号样式，例如展开式、折叠式或展开式（带新行）。您可以根据自己的要求选择任何花括号样式。

有两种格式化代码的选项。您可以将代码复制并粘贴到 JavaScript 美化器中，或选择一个文件上传。然后，您可以选择文件编码、缩进级别和括号样式，然后按“美化 JavaScript”按钮格式化代码。

Code Beautify

它是一个用于格式化代码的代码格式化工具。它可以格式化 JavaScript、SQL、XML、CSS 等多种语言的代码。

您需要搜索编程语言，这将打开格式化工具的界面。对于 JavaScript，Code Beautify 提供了一个名为 JavaScript Beautifier 的工具。您可以输入源代码、上传文件或输入 URL。然后，您需要单击“运行”来格式化代码。它还提供了许多其他可用于格式化代码的工具。

JS Beautify

它是一个 JavaScript 代码格式化工具，用于美化代码。您可以在美化器提供的空间中编写代码，或上传文件。

它提供了多种选项，您可以根据自己的需要进行设置。它允许您设置缩进空格，您可以设置制表符、2 个空格、3 个空格、4 个空格和 8 个空格的缩进。它允许您定义标记之间的换行符、行换行和花括号。

结论

我们学习了 JavaScript 格式化工具，它可以帮助生成可读且标准化的 JavaScript 代码。有许多代码格式化工具可供我们使用，例如 Prettier、JS Beautify、Code Beautify 等，用于格式化 JS 代码。

下一主题Javascript-promise-finally

JavaScript 格式化器

什么是格式化工具？

JavaScript 格式化工具的演示

演示 5

JavaScript 格式化工具的用途

JavaScript 格式化工具

Prettier

FreeFormatter-JavaScript 美化器

Code Beautify

JS Beautify

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 格式化器

什么是格式化工具？

JavaScript 格式化工具的演示

演示 5

JavaScript 格式化工具的用途

JavaScript 格式化工具

Prettier

FreeFormatter-JavaScript 美化器

Code Beautify

JS Beautify

结论

相关帖子

Selenium JavaScript

JavaScript 中的字符串格式化

JavaScript prompt()

如何在 JavaScript 中合并数组

JavaScript 调试

JavaScript 哈希表

如何使用 JavaScript 复制数组