跳到主要内容

JavaScript 字面量

什么是字面量？​

在JavaScript中，字面量（Literal）是一种直接在代码中表示固定值的表示法。简单来说，字面量就是你在代码中直接写出来的值，而不是通过变量或计算得到的值。

字面量是JavaScript中最基本的语法元素之一，它们允许你在代码中直接表示各种数据类型的值。

常见的JavaScript字面量类型​

JavaScript中有多种字面量类型，下面我们将逐一介绍。

1. 数字字面量​

数字字面量就是直接在代码中写出的数字。

js
// 整数字面量
let age = 25;

// 小数字面量
let price = 19.99;

// 科学计数法
let largeNumber = 5e6; // 5,000,000

console.log(age);      // 输出: 25
console.log(price);    // 输出: 19.99
console.log(largeNumber); // 输出: 5000000

特殊数字字面量​

JavaScript也支持十六进制、八进制和二进制表示法：

js
// 十六进制 (以0x开头)
let hex = 0xFF;       // 255

// 八进制 (在ES6中以0o开头)
let octal = 0o77;     // 63

// 二进制 (以0b开头)
let binary = 0b1111;  // 15

console.log(hex);     // 输出: 255
console.log(octal);   // 输出: 63
console.log(binary);  // 输出: 15

2. 字符串字面量​

字符串字面量是用引号括起来的文本。

js
// 使用单引号
let firstName = 'John';

// 使用双引号
let lastName = "Doe";

// 使用反引号(ES6模板字符串)
let greeting = `Hello, ${firstName} ${lastName}!`;

console.log(firstName);  // 输出: John
console.log(lastName);   // 输出: Doe
console.log(greeting);   // 输出: Hello, John Doe!
提示

使用反引号`创建的模板字符串允许字符串内插变量（使用${变量名}语法）和多行文本。

3. 布尔字面量​

布尔字面量只有两个值：

js
let isActive = true;
let isLoggedIn = false;

console.log(isActive);    // 输出: true
console.log(isLoggedIn);  // 输出: false

4. 数组字面量​

数组字面量使用方括号[]来创建数组。

js
// 空数组
let emptyArray = [];

// 包含元素的数组
let colors = ['red', 'green', 'blue'];

// 混合类型的数组
let mixed = [1, 'hello', true, { name: 'John' }];

console.log(colors);      // 输出: ['red', 'green', 'blue']
console.log(colors[0]);   // 输出: red
console.log(mixed);       // 输出: [1, 'hello', true, {name: 'John'}]

5. 对象字面量​

对象字面量使用花括号{}来创建对象，包含键值对。

js
// 空对象
let emptyObject = {};

// 包含属性的对象
let person = {
  name: 'Alice',
  age: 30,
  isStudent: false,
  greet: function() {
    return 'Hello!';
  }
};

console.log(person.name);      // 输出: Alice
console.log(person.age);       // 输出: 30
console.log(person.greet());   // 输出: Hello!

ES6对象字面量增强​

ES6引入了一些对象字面量的增强功能：

js
// 属性简写
let name = 'Bob';
let age = 25;

// 旧写法
let oldPerson = { name: name, age: age };

// ES6简写
let person = { name, age };

// 方法简写
let calculator = {
  // 旧写法
  add: function(a, b) {
    return a + b;
  },
  
  // ES6简写
  subtract(a, b) {
    return a - b;
  }
};

// 计算属性名
let propName = 'job';
let employee = {
  name: 'Tom',
  [propName]: 'Developer'
};

console.log(person);                   // 输出: {name: 'Bob', age: 25}
console.log(calculator.add(5, 3));     // 输出: 8
console.log(calculator.subtract(5, 3)); // 输出: 2
console.log(employee);                 // 输出: {name: 'Tom', job: 'Developer'}

6. 正则表达式字面量​

正则表达式字面量使用斜杠/包围。

js
// 匹配所有数字
let numberPattern = /\d+/g;

let text = "I have 3 apples and 5 oranges";
let numbers = text.match(numberPattern);

console.log(numbers);  // 输出: ['3', '5']

7. 特殊字面量​

JavaScript还有一些特殊的字面量值：

js
// null字面量
let emptyValue = null;

// undefined (技术上来说是一个全局变量，但常被视为字面量)
let notDefined;  // 自动设置为undefined

console.log(emptyValue);  // 输出: null
console.log(notDefined);  // 输出: undefined

字面量与构造函数的比较​

在JavaScript中，很多类型既可以使用字面量创建，也可以使用构造函数创建。通常，字面量是更简洁、更高效的选择。

js
// 字符串
let literalString = "Hello";        // 字面量方式
let constructorString = new String("Hello");  // 构造函数方式

// 数字
let literalNumber = 42;             // 字面量方式
let constructorNumber = new Number(42);  // 构造函数方式

// 布尔值
let literalBoolean = true;          // 字面量方式
let constructorBoolean = new Boolean(true);  // 构造函数方式

// 数组
let literalArray = [1, 2, 3];       // 字面量方式
let constructorArray = new Array(1, 2, 3);  // 构造函数方式

// 对象
let literalObject = { name: "John" };  // 字面量方式
let constructorObject = new Object();  // 构造函数方式
constructorObject.name = "John";

console.log(typeof literalString);      // 输出: string
console.log(typeof constructorString);  // 输出: object

console.log(literalArray);              // 输出: [1, 2, 3]
console.log(constructorArray);          // 输出: [1, 2, 3]
警告

使用构造函数创建基本类型值（如字符串、数字、布尔值）会生成对象包装器，而不是基本类型值，这可能会导致意外行为。因此，通常推荐使用字面量语法。

实际应用场景​

案例1: 用户配置对象​

使用对象字面量创建配置对象是常见做法：

js
// 用户个人资料设置
const userSettings = {
  username: 'coder123',
  theme: 'dark',
  notifications: {
    email: true,
    sms: false,
    push: true
  },
  language: 'zh-CN',
  timezone: 'Asia/Shanghai'
};

// 应用设置
function applySettings(settings) {
  console.log(`应用以下设置：`);
  console.log(`用户: ${settings.username}`);
  console.log(`主题: ${settings.theme}`);
  console.log(`语言: ${settings.language}`);
}

applySettings(userSettings);
// 输出:
// 应用以下设置：
// 用户: coder123
// 主题: dark
// 语言: zh-CN

案例2: API请求配置​

使用字面量创建API请求的配置：

js
// 使用对象字面量定义API请求参数
const apiRequest = {
  url: 'https://api.example.com/data',
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123'
  },
  body: JSON.stringify({
    name: 'New User',
    email: 'user@example.com'
  })
};

// 模拟发送请求
function sendRequest(request) {
  console.log(`发送${request.method}请求到: ${request.url}`);
  console.log('请求头:', request.headers);
  console.log('请求体:', request.body);
}

sendRequest(apiRequest);
// 输出请求的详细信息

案例3: 组件配置​

在前端框架中使用对象字面量配置组件：

js
// 定义一个UI组件的配置
const buttonConfig = {
  text: '提交',
  color: 'primary',
  size: 'large',
  disabled: false,
  onClick: function() {
    console.log('按钮被点击了!');
  },
  styles: {
    borderRadius: '4px',
    padding: '10px 20px'
  }
};

// 创建按钮组件
function createButton(config) {
  const button = document.createElement('button');
  button.textContent = config.text;
  button.classList.add(config.color, config.size);
  button.disabled = config.disabled;
  
  // 应用样式
  Object.assign(button.style, config.styles);
  
  // 添加事件监听器
  button.addEventListener('click', config.onClick);
  
  return button;
}

// 使用配置创建按钮
// const submitButton = createButton(buttonConfig);
// document.body.appendChild(submitButton);

总结​

字面量是JavaScript中最基本也是最常用的语法结构之一。它们提供了一种直观、简洁的方式来表示数据：

  1. 数字字面量 - 直接表示数值
  2. 字符串字面量 - 使用引号表示文本
  3. 布尔字面量 - true和false
  4. 数组字面量 - 使用[]创建数组
  5. 对象字面量 - 使用{}创建对象
  6. 正则表达式字面量 - 使用//定义正则表达式
  7. 特殊字面量 - 如null

字面量语法通常比构造函数更简洁、更高效，是JavaScript开发中的首选方式。掌握字面量语法是成为高效JavaScript开发者的基础之一。

练习​

  1. 创建一个包含个人信息的对象字面量，包括姓名、年龄、兴趣爱好（数组）和一个打招呼的方法。
  2. 使用数组字面量创建一个购物清单，然后编写代码添加和删除项目。
  3. 尝试创建一个使用所有类型字面量（数字、字符串、布尔值、数组、对象、正则表达式）的复杂数据结构。

延伸阅读​

通过理解和掌握JavaScript字面量，你将为进一步学习JavaScript编程奠定坚实的基础。