输入JavaScript代码

粘贴需要格式化的JavaScript代码

JavaScript代码

0 字符 0 行

格式化选项

选择格式化方式

格式化类型

美化 (展开格式) 压缩 (精简格式) 混淆 (代码保护)

缩进方式

空格制表符 (Tab)

缩进大小

其他选项

移除注释 ES5 → ES6 转换添加分号使用单引号

格式化结果

格式化后的JavaScript代码

等待格式化...

原始大小： 0 字符

格式化后： 0 字符

压缩率： 0%

语法检查

检查JavaScript代码的语法错误

代码示例

以下是在不同场景下处理JavaScript代码的示例：

JavaScript 美化原理

// 基本的JavaScript美化
function beautifyJS(code, indent = '    ') {
    let formatted = '';
    let indentLevel = 0;
    let inString = false;
    let stringChar = '';
    
    for (let i = 0; i < code.length; i++) {
        const char = code[i];
        
        // 处理字符串
        if ((char === '"' || char === "'" || char === '`') && 
            code[i-1] !== '\\') {
            if (!inString) {
                inString = true;
                stringChar = char;
            } else if (char === stringChar) {
                inString = false;
                stringChar = '';
            }
        }
        
        if (inString) {
            formatted += char;
            continue;
        }
        
        // 处理缩进增加
        if (char === '{' || char === '(') {
            formatted += char + '\n' + indent.repeat(indentLevel + 1);
            indentLevel++;
        }
        // 处理缩进减少
        else if (char === '}' || char === ')') {
            indentLevel = Math.max(0, indentLevel - 1);
            formatted += '\n' + indent.repeat(indentLevel) + char;
        }
        // 处理分号和逗号
        else if (char === ';' || char === ',') {
            formatted += char + '\n' + indent.repeat(indentLevel);
        }
        // 处理空白
        else if (char === ' ' || char === '\t' || char === '\n') {
            if (formatted && !/[ \t\n]/.test(formatted.slice(-1))) {
                formatted += ' ';
            }
        }
        else {
            formatted += char;
        }
    }
    
    return formatted.trim();
}

// JavaScript压缩
function minifyJS(code) {
    // 移除注释（单行和多行）
    code = code.replace(/\/\/.*$/gm, '')
               .replace(/\/\*[\s\S]*?\*\//g, '');
    
    // 移除多余的空白
    code = code.replace(/\s+/g, ' ');
    
    // 移除运算符周围的空白
    code = code.replace(/\s*([{}();,:<>=+\-*\/])\s*/g, '$1');
    
    return code.trim();
}

// 简单的语法检查
function checkJSSyntax(code) {
    try {
        new Function(code);
        return { valid: true, errors: [] };
    } catch (e) {
        return {
            valid: false,
            errors: [{ message: e.message, line: e.lineNumber || '未知' }]
        };
    }
}

ES5 vs ES6 语法对比

// ES5 写法
var name = '张三';
var age = 25;
var obj = {
    name: name,
    age: age,
    sayHello: function() {
        console.log('Hello, ' + this.name);
    }
};
var arr = [1, 2, 3];
var doubled = arr.map(function(x) {
    return x * 2;
});

// ES6 写法
const name = '张三';
const age = 25;
const obj = {
    name,
    age,
    sayHello() {
        console.log(`Hello, ${this.name}`);
    }
};
const arr = [1, 2, 3];
const doubled = arr.map(x => x * 2);

// ES5 类定义
function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.sayHello = function() {
    console.log('Hello, ' + this.name);
};

// ES6 类定义
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    sayHello() {
        console.log(`Hello, ${this.name}`);
    }
}

// ES5 模块
module.exports = {
    add: function(a, b) {
        return a + b;
    }
};

// ES6 模块
export function add(a, b) {
    return a + b;
}

Python JavaScript处理

# 使用 jsbeautifier 美化JS
# pip install jsbeautifier
import jsbeautifier

def beautify_js(code):
    options = {
        'indent_size': 4,
        'indent_with_tabs': False,
        'space_in_empty_paren': True
    }
    return jsbeautifier.beautify(code, options)

# 使用 jsmin 压缩JS
# pip install jsmin
from jsmin import jsmin

def minify_js(code):
    return jsmin(code)

# ES5 到 ES6 的简单转换示例
def es5_to_es6(code):
    # var → const/let
    code = code.replace(r'\bvar\b', 'let')
    
    # function() → () =>
    code = code.replace(r'function\s*\(\s*\)\s*{', '() => {')
    code = code.replace(r'function\s*\(([^)]+)\)\s*{', r'(\1) => {')
    
    return code

关于JavaScript格式化

为什么要格式化JavaScript？

JavaScript格式化是指将JS代码按照一定的规范进行排版和缩进，使代码更易读、易维护。良好的代码格式可以提高团队协作效率，减少代码审查时间，便于调试和维护。

JavaScript压缩 vs 美化

JS美化（展开格式）：增加缩进、换行，使代码易于阅读和编辑。适合开发环境。
JS压缩（精简格式）：移除所有不必要的空白、注释，缩短变量名，减少文件大小。适合生产环境，可以加快页面加载速度。
JS混淆（代码保护）：除了压缩外，还会将变量名、函数名替换为无意义的字符，使代码难以阅读和逆向工程。

JavaScript编码风格

流行的JavaScript代码风格指南：

Airbnb JavaScript Style Guide - 最流行的JS风格指南
Google JavaScript Style Guide - Google官方风格指南
Standard Style - 无分号、严格的代码风格
Prettier - 自动格式化工具，零配置

ES6新特性

ES6（ECMAScript 2015）引入了许多新特性：

let/const - 块级作用域变量声明
箭头函数 - 更简洁的函数语法
模板字符串 - 使用反引号的字符串插值
解构赋值 - 从数组或对象中提取值
类（Class） - 面向对象编程语法糖
模块化 - import/export语法
Promise/async-await - 异步编程改进

JavaScript格式化工具