一、前言
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
复制代码
e
72
100
(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())。
通过本文的梳理,相信你已掌握内置对象与包装类型的核心用法。建议结合实际需求多练习(如 "格式化手机号""生成随机验证码""计算日期差"),才能真正熟练运用。