详解 JavaScript 内置对象与包装类型：方法、案例与实战

一、前言

JavaScript 内置对象（如 String、Number、Boolean、Math、Date）是开发的基石，而包装类型 则是连接基本数据类型与引用类型的桥梁。本文将系统梳理三大包装类型（String、Number、Boolean）及核心内置对象（Math、Date）的属性与方法，每个方法均附带代码示例 和运行结果，帮助你彻底掌握内置对象的使用场景与细节。

二、包装类型：基本数据类型的 "能力扩展器"

2.1 核心概念与作用

概念：包装类型（String、Number、Boolean）是特殊的引用类型，用于给基本数据类型（string、number、boolean）提供内置方法。
为什么需要 ：基本数据类型本身没有方法，但开发中需要类似 str.slice()、num.toFixed() 的操作，包装类型通过 "临时实例化" 实现这一需求 ------执行方法时自动创建包装对象，执行后立即销毁。

关键区别 ：

特性	基本数据类型	包装类型（特殊引用类型）	普通引用类型（如 Array）
内存存储	栈内存（直接存值）	临时堆内存（执行时创建，执行后销毁）	堆内存（作用域内持续存在）
方法访问	依赖包装类型临时提供	自身携带方法	自身携带方法
生命周期	随作用域销毁	仅当前行代码执行瞬间	离开作用域后销毁

三、三大包装类型详解

3.1 Boolean 类型：布尔值的 "工具人"

Boolean 包装类型无特殊属性，主要用于类型转换 和基础方法调用，实际开发中更多使用 Boolean() 工具函数而非实例化对象。

核心方法

方法	调用者	参数	返回值	作用	是否改变原始值
`Boolean()`	全局 /`Boolean`	任意值	`true`/`false`	强制转换为布尔值	否
`toString()`	`Boolean` 实例	无	`"true"`/`"false"`	转换为布尔值对应的字符串	否
`valueOf()`	`Boolean` 实例	无	原始布尔值（`true`/`false`）	获取实例对应的基本数据类型值	否

代码示例与运行结果

javascript

运行

复制代码

// 1. Boolean() 工具函数：类型转换
console.log(Boolean(0));        // false（0 是假值）
console.log(Boolean("hello"));  // true（非空字符串是真值）
console.log(Boolean(null));    // false（null 是假值）

// 2. 实例化 Boolean 对象（不推荐，优先用基本类型）
var boolObj = new Boolean(true);
console.log(boolObj.toString());  // "true"（转换为字符串）
console.log(boolObj.valueOf());   // true（获取原始值）
console.log(typeof boolObj);      // "object"（引用类型）
console.log(typeof boolObj.valueOf());  // "boolean"（基本类型）

运行结果：

plaintext

复制代码

false
true
false
true
true
object
boolean

3.2 Number 类型：数字的 "格式化与校验专家"

Number 包装类型提供数值格式化 、类型判断 、进制转换 等核心能力，同时包含 MAX_VALUE、NaN 等静态属性。

1. 静态属性（直接通过 `Number` 调用）

属性名	描述	示例值
`Number.MAX_VALUE`	JavaScript 可表示的最大正数	`1.7976931348623157e+308`
`Number.MIN_VALUE`	JavaScript 可表示的最小正数	`5e-324`
`Number.NaN`	非数字值（Not a Number）	`NaN`
`Number.POSITIVE_INFINITY`	正无穷大	`Infinity`
`Number.NEGATIVE_INFINITY`	负无穷大	`-Infinity`

2. 核心方法

方法	调用者	参数	返回值	作用	是否改变原始值
`Number.isNaN()`	`Number`	待判断的值	`true`/`false`	判断值是否为 `NaN`（仅数字类型才可能是）	否
`Number.isInteger()`	`Number`	待判断的值	`true`/`false`	判断值是否为整数	否
`toFixed(n)`	`Number` 实例	`n`：保留小数位数	字符串	定点格式化（保留 n 位小数）	否
`toString(radix)`	`Number` 实例	`radix`：进制（2-36）	字符串	转换为指定进制的字符串	否
`valueOf()`	`Number` 实例	无	原始数字值	获取实例对应的基本数据类型值	否

代码示例与运行结果

javascript

运行

复制代码

// 1. 静态方法：类型判断
console.log(Number.isNaN(10 / "a"));    // true（10/"a" 结果为 NaN）
console.log(Number.isNaN("123"));       // false（字符串不是数字类型，直接返回 false）
console.log(Number.isInteger(123));     // true（123 是整数）
console.log(Number.isInteger(123.45));  // false（123.45 是小数）

// 2. 实例方法：格式化与进制转换
var num = 123.456;
console.log(num.toFixed(2));            // "123.46"（保留 2 位小数，四舍五入）
console.log(num.toString(2));           // "1111011.01110100011110101110000101000111101011100001010001111011"（二进制）
console.log(num.valueOf());             // 123.456（获取原始值）

// 3. 静态属性示例
console.log(Number.MAX_VALUE);          // 1.7976931348623157e+308
console.log(Number.MIN_VALUE);          // 5e-324
console.log(10 / 0);                    // Infinity（正无穷大）

运行结果：

plaintext

复制代码

true
false
true
false
123.46
1111011.01110100011110101110000101000111101011100001010001111011
123.456
1.7976931348623157e+308
5e-324
Infinity

3.3 String 类型：字符串的 "全能工具箱"

String 是最常用的包装类型，提供字符串截取、查找、替换、格式化等 20+ 方法，是前端处理文本的核心工具。

1. 核心属性

length：返回字符串的长度（字符个数），只读属性。

2. 核心方法（按功能分类）

（1）字符访问与编码

方法	调用者	参数	返回值	作用	是否改变原始值
`charAt(index)`	字符串	`index`：字符下标	对应下标字符（空串 if 越界）	获取指定位置的字符	否
`charCodeAt(index)`	字符串	`index`：字符下标	字符的 Unicode 编码（`NaN` if 越界）	获取指定位置字符的编码（0-65535）	否

代码示例：

javascript

运行

复制代码

var str = "Hello World";
console.log(str.charAt(1));       // "e"（下标 1 对应的字符）
console.log(str.charAt(100));     // ""（下标越界，返回空串）
console.log(str.charCodeAt(0));   // 72（"H" 的 Unicode 编码）
console.log(str.charCodeAt(10));  // 100（"d" 的 Unicode 编码）

运行结果：

plaintext

复制代码

（2）字符串拼接与截取

方法	调用者	参数	返回值	作用	是否改变原始值
`concat(str1, str2)`	字符串	待拼接的字符串	拼接后的新字符串	连接多个字符串（同 `+` 运算符）	否
`slice(start, end)`	字符串	`start`：起始下标；`end`：结束下标（可选）	截取后的新字符串	提取 [start, end) 区间的字符（支持负下标）	否
`substring(start, end)`	字符串	`start`：起始下标；`end`：结束下标（可选）	截取后的新字符串	提取 [start, end) 区间的字符（不支持负下标）	否

代码示例：

javascript

运行

复制代码

var str = "Hello";
// 拼接
console.log(str.concat(" ", "World"));  // "Hello World"（拼接两个字符串）
// 截取（slice 支持负下标：-1 表示最后一个字符）
console.log(str.slice(1, 4));          // "ell"（下标 1 到 3 的字符）
console.log(str.slice(-3));            // "llo"（从倒数第 3 个字符到结尾）
// substring（负下标视为 0）
console.log(str.substring(1, 4));      // "ell"
console.log(str.substring(-3));         // "Hello"（负下标转为 0，截取全部）

运行结果：

plaintext

复制代码

Hello World
ell
llo
ell
Hello

（3）字符串查找与包含

方法	调用者	参数	返回值	作用	是否改变原始值
`indexOf(substr)`	字符串	`substr`：待查找子串	首次出现下标（-1 if 未找到）	从左到右查找子串	否
`lastIndexOf(substr)`	字符串	`substr`：待查找子串	最后出现下标（-1 if 未找到）	从右到左查找子串	否
`includes(substr)`	字符串	`substr`：待判断子串	`true`/`false`	判断是否包含子串（区分大小写）	否
`startsWith(substr)`	字符串	`substr`：前缀子串	`true`/`false`	判断是否以子串开头	否
`endsWith(substr)`	字符串	`substr`：后缀子串	`true`/`false`	判断是否以子串结尾	否

代码示例：

javascript

运行

复制代码

var str = "Hello World Hello";
console.log(str.indexOf("Hello"));      // 0（首次出现的下标）
console.log(str.lastIndexOf("Hello"));  // 12（最后出现的下标）
console.log(str.includes("World"));     // true（包含 "World"）
console.log(str.startsWith("He"));      // true（以 "He" 开头）
console.log(str.endsWith("llo"));       // true（以 "llo" 结尾）
console.log(str.includes("world"));     // false（区分大小写）

运行结果：

plaintext

复制代码

0
12
true
true
true
false

（4）字符串替换与重复

方法	调用者	参数	返回值	作用	是否改变原始值
`replace(old, new)`	字符串	`old`：待替换子串 / 正则；`new`：新内容	替换后的新字符串	替换首次匹配的内容	否
`replaceAll(old, new)`	字符串	`old`：待替换子串 / 正则；`new`：新内容	替换后的新字符串	替换所有匹配的内容（需正则加 `g` 标志）	否
`repeat(n)`	字符串	`n`：重复次数（非负整数）	重复后的新字符串	按次数重复字符串	否

代码示例：

javascript

运行

复制代码

var str = "Hello World Hello";
// 替换首次匹配
console.log(str.replace("Hello", "Hi"));        // "Hi World Hello"
// 替换所有匹配（正则加 g 标志）
console.log(str.replace(/Hello/g, "Hi"));       // "Hi World Hi"
// replaceAll（直接替换所有）
console.log(str.replaceAll("Hello", "Hi"));     // "Hi World Hi"
// 重复字符串
console.log("AB".repeat(3));                    // "ABABAB"

运行结果：

plaintext

复制代码

Hi World Hello
Hi World Hi
Hi World Hi
ABABAB

（5）字符串格式化

方法	调用者	参数	返回值	作用	是否改变原始值
`trim()`	字符串	无	去除首尾空白的新字符串	清除首尾空格、制表符（`\t`）、换行符（`\n`）	否
`padStart(len, padStr)`	字符串	`len`：目标长度；`padStr`：填充字符	左填充后的新字符串	从开头填充字符到目标长度	否
`padEnd(len, padStr)`	字符串	`len`：目标长度；`padStr`：填充字符	右填充后的新字符串	从结尾填充字符到目标长度	否
`toLowerCase()`	字符串	无	全小写的新字符串	转换为小写	否
`toUpperCase()`	字符串	无	全大写的新字符串	转换为大写	否

代码示例：

javascript

运行

复制代码

var str = "  Hello World  ";
// 去除首尾空白
console.log("|" + str.trim() + "|");          // "|Hello World|"
// 填充（目标长度 10，不足则用 "*" 填充）
console.log("5".padStart(3, "0"));            // "005"（左填充，补零）
console.log("abc".padEnd(5, "-"));            // "abc--"（右填充，补 "-"）
// 大小写转换
console.log(str.toLowerCase());               // "  hello world  "
console.log(str.toUpperCase());               // "  HELLO WORLD  "

运行结果：

plaintext

复制代码

|Hello World|
005
abc--
  hello world  
  HELLO WORLD

（6）字符串分割与匹配

方法	调用者	参数	返回值	作用	是否改变原始值
`split(sep, limit)`	字符串	`sep`：分隔符；`limit`：最大返回长度	分割后的数组	按分隔符拆分字符串为数组	否
`match(reg)`	字符串	`reg`：正则表达式	匹配结果数组（`null` if 失败）	检索与正则匹配的内容	否
`search(reg)`	字符串	`reg`：正则表达式	首次匹配下标（-1 if 失败）	查找正则首次匹配的位置	否

代码示例：

javascript

运行

复制代码

var str = "apple,banana,orange";
// 分割字符串（limit 限制返回 2 个元素）
console.log(str.split(",", 2));               // ["apple", "banana"]
// 正则匹配（匹配所有水果名）
console.log(str.match(/[a-z]+/g));            // ["apple", "banana", "orange"]
// 正则查找（查找 "banana" 的位置）
console.log(str.search(/banana/));             // 6（"banana" 首次出现的下标）

运行结果：

plaintext

复制代码

[ 'apple', 'banana' ]
[ 'apple', 'banana', 'orange' ]
6

四、核心内置对象：Math 与 Date

4.1 Math 对象：数学计算的 "瑞士军刀"

Math 是静态对象（无需实例化），提供数学常数 和计算函数，适用于数值运算、随机数生成等场景。

1. 静态属性

Math.PI：圆周率（≈3.141592653589793）

2. 核心方法

方法	调用者	参数	返回值	作用	是否改变原始值
`Math.ceil(num)`	`Math`	`num`：数字	大于等于 `num` 的最小整数	向上取整（如 2.1 → 3）	否
`Math.floor(num)`	`Math`	`num`：数字	小于等于 `num` 的最大整数	向下取整（如 2.9 → 2）	否
`Math.round(num)`	`Math`	`num`：数字	四舍五入后的整数	标准四舍五入（如 2.5 → 3，1.4 → 1）	否
`Math.max(...nums)`	`Math`	多个数字	最大值（无参数 → `-Infinity`）	取一组数中的最大值	否
`Math.min(...nums)`	`Math`	多个数字	最小值（无参数 → `Infinity`）	取一组数中的最小值	否
`Math.random()`	`Math`	无	[0, 1) 间的随机浮点数	生成伪随机数（需手动缩放范围）	否
`Math.sqrt(num)`	`Math`	`num`：非负数	`num` 的平方根	计算平方根（如 16 → 4）	否

代码示例与运行结果

javascript

运行

复制代码

// 1. 取整
console.log(Math.ceil(2.1));    // 3（向上取整）
console.log(Math.floor(2.9));   // 2（向下取整）
console.log(Math.round(2.5));   // 3（四舍五入）

// 2. 最大值与最小值
console.log(Math.max(1, 5, 3)); // 5（取最大值）
console.log(Math.min(1, 5, 3)); // 1（取最小值）

// 3. 随机数（生成 1-10 的随机整数）
var randomNum = Math.floor(Math.random() * 10) + 1;
console.log(randomNum);         // 1-10 间的随机整数（如 7）

// 4. 平方根与圆周率
console.log(Math.sqrt(16));     // 4（16 的平方根）
console.log(Math.PI);           // 3.141592653589793（圆周率）

运行结果（随机数结果因人而异）：

plaintext

复制代码

3
2
3
5
1
7
4
3.141592653589793

4.2 Date 对象：时间的 "管理者"

Date 对象用于处理日期与时间，基于 "Unix 时间戳"（自 1970-01-01 UTC 起的毫秒数），支持时间的创建、获取、设置、格式化。

1. 时间创建方法

方法	描述	示例
`new Date()`	创建当前时间实例	`var now = new Date();`
`new Date(timestamp)`	通过时间戳创建	`var date = new Date(1717248000000);`
`new Date(year, month, ...)`	通过年、月（0-11）等参数创建	`var date = new Date(2025, 0, 1);`
`new Date(dateStr)`	通过日期字符串创建	`var date = new Date("2025-01-01");`
`Date.now()`	静态方法，返回当前时间戳	`var timestamp = Date.now();`

2. 时间获取方法（常用）

方法	作用	示例返回值（假设时间为 2025-01-01 12:30:45）
`getFullYear()`	获取年份（4 位）	2025
`getMonth()`	获取月份（0-11，0 表示 1 月）	0（表示 1 月）
`getDate()`	获取日期（1-31）	1
`getHours()`	获取小时（0-23）	12
`getMinutes()`	获取分钟（0-59）	30
`getSeconds()`	获取秒（0-59）	45
`getDay()`	获取星期（0-6，0 表示周日）	3（假设 2025-01-01 是周三）
`getTime()`	获取时间戳（毫秒数）	1735701045000

3. 时间设置方法（常用）

方法	作用	示例
`setFullYear(year)`	设置年份	`date.setFullYear(2026);`
`setMonth(month)`	设置月份（0-11）	`date.setMonth(1);`（设置为 2 月）
`setDate(day)`	设置日期（1-31）	`date.setDate(15);`（设置为 15 日）
`setHours(hour)`	设置小时（0-23）	`date.setHours(18);`（设置为 18 点）

4. 时间格式化方法

方法	作用	示例返回值（假设时间为 2025-01-01 12:30:45）
`toLocaleString()`	本地格式字符串（含日期和时间）	"2025/1/1 12:30:45"（中文环境）
`toLocaleDateString()`	本地格式日期字符串	"2025/1/1"
`toLocaleTimeString()`	本地格式时间字符串	"12:30:45"
`toJSON()`	JSON 格式时间字符串（UTC 时间）	"2025-01-01T04:30:45.000Z"

代码示例与运行结果

javascript

运行

复制代码

// 1. 创建时间实例
var now = new Date();                          // 当前时间
var timestampDate = new Date(1717248000000);   // 通过时间戳创建
var paramDate = new Date(2025, 0, 1, 12, 30);  // 通过参数创建（2025-01-01 12:30）
var strDate = new Date("2025-01-01");          // 通过字符串创建

// 2. 获取时间信息
console.log(paramDate.getFullYear());          // 2025（年份）
console.log(paramDate.getMonth() + 1);         // 1（月份需 +1，0 表示 1 月）
console.log(paramDate.getDate());              // 1（日期）
console.log(paramDate.getHours());             // 12（小时）
console.log(paramDate.getDay());               // 3（假设周三）

// 3. 设置时间
paramDate.setHours(18);                       // 设置小时为 18
console.log(paramDate.getHours());             // 18

// 4. 格式化时间
console.log(paramDate.toLocaleString());       // "2025/1/1 18:30:00"
console.log(paramDate.toJSON());               // "2025-01-01T10:30:00.000Z"（UTC 时间）

// 5. 获取当前时间戳
console.log(Date.now());                       // 1717248000000（示例值）

运行结果：

plaintext

复制代码

2025
1
1
12
3
18
2025/1/1 18:30:00
2025-01-01T10:30:00.000Z
1717248000000

五、总结与实战建议

包装类型使用原则：
- 优先使用基本数据类型（如 var str = "hello"），避免手动实例化包装对象（如 new String("hello")），减少内存开销。
- 基本数据类型调用方法时，JS 会自动创建包装对象，无需手动干预。
内置对象高频场景：
- String：表单验证（includes()、startsWith()）、文本格式化（trim()、padStart()）、模板拼接（replace()）。
- Number：数值格式化（toFixed()）、类型判断（Number.isInteger()）。
- Math：随机数生成（Math.random()）、数值计算（Math.max()、Math.sqrt()）。
- Date：时间戳转换、倒计时功能、日志时间格式化。
避坑指南 ：
- String 的 substring() 不支持负下标，需负下标时用 slice()。
- Date 的月份从 0 开始（0 表示 1 月），日期字符串建议用 YYYY-MM-DD 格式（兼容性最好）。
- Number.isNaN() 仅判断数字类型的非数字值，普通类型直接返回 false（区别于全局 isNaN()）。

通过本文的梳理，相信你已掌握内置对象与包装类型的核心用法。建议结合实际需求多练习（如 "格式化手机号""生成随机验证码""计算日期差"），才能真正熟练运用。

详解 JavaScript 内置对象与包装类型：方法、案例与实战

一、前言

二、包装类型：基本数据类型的 "能力扩展器"

2.1 核心概念与作用

三、三大包装类型详解

3.1 Boolean 类型：布尔值的 "工具人"

核心方法

代码示例与运行结果

3.2 Number 类型：数字的 "格式化与校验专家"

1. 静态属性（直接通过 Number 调用）

2. 核心方法

代码示例与运行结果

3.3 String 类型：字符串的 "全能工具箱"

1. 核心属性

2. 核心方法（按功能分类）

（1）字符访问与编码

（2）字符串拼接与截取

（3）字符串查找与包含

（4）字符串替换与重复

（5）字符串格式化

（6）字符串分割与匹配

四、核心内置对象：Math 与 Date

4.1 Math 对象：数学计算的 "瑞士军刀"

1. 静态属性

2. 核心方法

代码示例与运行结果

4.2 Date 对象：时间的 "管理者"

1. 时间创建方法

2. 时间获取方法（常用）

3. 时间设置方法（常用）

4. 时间格式化方法

代码示例与运行结果

五、总结与实战建议

1. 静态属性（直接通过 `Number` 调用）