JavaScript基础教程（十一）语法之字面量：JS字面量，藏在代码里的『语法糖刺客』？

原创于 2025-09-01 09:05:31 发布 · 243 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

JavaScript基础教程专栏收录该内容

91 篇文章

订阅专栏

什么是字面量？

字面量（Literal）是在源代码中直接表示数据的符号序列，无需通过变量或计算即可表达特定值。与构造函数相比，字面量语法更简洁、可读性更高。

七大核心字面量详解

1. 对象字面量

最常用的字面量类型，用花括号表示：

// 传统写法
const person = {
    name: '张三',
    age: 28,
    greet() {
        return `你好，我是${this.name}`
    }
}

// 现代增强写法（ES2015+）
const role = 'admin'
const user = {
    [role + 'Config']: {},    // 计算属性名
    role,                     // 属性简写
    deleteUser() {}           // 方法简写
}

2. 数组字面量

使用方括号创建数组：

// 基础数组
const fruits = ['苹果', '香蕉', '橙子']

// 空位数组（注意：空位与undefined不同）
const sparseArray = [1,,3]    // 长度为3，第2个元素为空

// 解构赋值配合
const [first, ...rest] = fruits

3. 字符串字面量

三种表达方式各有特点：

const singleQuote = '单引号'
const doubleQuote = "双引号"
const templateLiteral = `模板字符串`

// 模板字符串高级用法
const price = 19.99
const message = `商品价格：${price.toFixed(2)}元
                 ${price > 20 ? '偏贵' : '实惠'}`

4. 数字字面量

支持多种进制表示：

const decimal = 123          // 十进制
const binary = 0b1010        // 二进制（10）
const octal = 0o755          // 八进制（493）
const hex = 0xFF             // 十六进制（255）
const bigInt = 123n          // BigInt类型

5. 正则表达式字面量

比构造函数更简洁：

// 字面量形式
const regex = /ab+c/i

// 等价构造函数形式
const regex2 = new RegExp('ab+c', 'i')

6. 布尔字面量

最简单的字面量类型：

const isActive = true
const isComplete = false

7. null与undefined字面量

特殊的基础值表示：

const emptyValue = null
const notDefined = undefined

为什么推荐使用字面量？

语法简洁：减少冗余代码
可读性高：直观表达数据结构
性能更优：解析速度更快
错误更少：避免构造函数陷阱

// 不推荐
const obj = new Object()
const arr = new Array()

// 推荐
const obj = {}
const arr = []

掌握字面量的使用技巧，能够显著提升代码质量与开发效率，是每位JavaScript开发者必须精通的基础技能。