JavaScript: JavaScript 实用工具方法
最后更新：2026-10-13
前面学了类型转换，这课来学一批日常开发高频使用的工具方法。它们就像瑞士军刀——每一把都不复杂，但关键时刻缺了哪把都不行。
1. 常用工具方法详解
从字符串开头解析数字，遇到非数字字符就停下：
HTML
<script>
console.log(parseInt("42px")); // 42
console.log(parseInt("3.14")); // 3（只取整数部分）
console.log(parseFloat("3.14")); // 3.14
console.log(parseFloat("3.14abc")); // 3.14
console.log(parseInt("abc42")); // NaN（开头就不是数字）
</script>
parseInt 第二个参数是进制：
HTML
<script>
console.log(parseInt("FF", 16)); // 255（十六进制）
console.log(parseInt("10", 2)); // 2（二进制）
</script>
坑：不传进制时，以 0x 开头的字符串会被当作十六进制解析。建议永远传第二个参数 10。
(2) isNaN vs Number.isNaN
| 方法 | 行为 |
|---|---|
isNaN(value) |
先转数字，再判断是否 NaN |
Number.isNaN(value) |
严格判断是否为 NaN（不转换） |
HTML
<script>
console.log(isNaN("hello")); // true（先 Number("hello") → NaN，然后 true）
console.log(Number.isNaN("hello")); // false（"hello" 本身不是 NaN）
console.log(isNaN(undefined)); // true
console.log(Number.isNaN(undefined));// false
</script>
结论：用 Number.isNaN()，它不会偷偷做类型转换。
(3) toFixed
控制小数位数，返回字符串：
HTML
<script>
console.log((3.14159).toFixed(2)); // "3.14"
console.log((3.1).toFixed(4)); // "3.1000"（补零）
console.log((3.145).toFixed(2)); // "3.14" 或 "3.15"（浮点精度问题，不保证四舍五入）
</script>
注意 toFixed 返回字符串，计算时需要再用 Number() 转回来。
(4) toString
数字转字符串，支持指定进制：
HTML
<script>
console.log((255).toString()); // "255"
console.log((255).toString(16)); // "ff"
console.log((8).toString(2)); // "1000"
console.log((100).toString(8)); // "144"
</script>
布尔值和数组也有 toString：
HTML
<script>
console.log(true.toString()); // "true"
console.log([1,2,3].toString()); // "1,2,3"
</script>
(5) Number.isInteger
判断一个值是否为整数：
HTML
<script>
console.log(Number.isInteger(5)); // true
console.log(Number.isInteger(5.0)); // true（5.0 就是 5）
console.log(Number.isInteger(5.5)); // false
console.log(Number.isInteger("5")); // false（字符串不是整数）
console.log(Number.isInteger(NaN)); // false
</script>
(6) Math.trunc 和 Math.sign
Math.trunc 直接截掉小数部分（不做四舍五入）：
HTML
<script>
console.log(Math.trunc(4.9)); // 4
console.log(Math.trunc(-4.9)); // -4
console.log(Math.trunc(4.1)); // 4
</script>
Math.sign 返回数字的符号：
HTML
<script>
console.log(Math.sign(5)); // 1
console.log(Math.sign(-5)); // -1
console.log(Math.sign(0)); // 0
console.log(Math.sign(-0)); // -0
console.log(Math.sign(NaN)); // NaN
</script>
(7) typeof 的局限
typeof 通常能判断类型，但有几个经典翻车：
HTML
<script>
console.log(typeof 42); // "number" ✅
console.log(typeof "hello"); // "string" ✅
console.log(typeof true); // "boolean" ✅
console.log(typeof undefined); // "undefined" ✅
console.log(typeof null); // "object" ❌ 这是历史 bug！
console.log(typeof []); // "object" ❌ 数组也是 object
console.log(typeof {}); // "object" ✅
console.log(typeof function(){}); // "function" ✅
</script>
typeof null === "object" 是 JavaScript 的"元老级 bug"——1995 年就存在了，改不了了。判断 null 要用 value === null。判断数组要用 Array.isArray()。
▶ 示例：价格计算器
▶ 试一试▶ 示例：输入验证工具
▶ 试一试▶ 示例：typeof 与类型判断
▶ 试一试❓ 常见问题
Q
toFixed 为什么不保证四舍五入？A 因为浮点数在二进制中无法精确表示。
(0.1 + 0.2).toFixed(1) 可能得到 "0.3" 也可能出问题。如果需要精确的四舍五入，用 Math.round(num * 100) / 100 再 toFixed。A
parseFloat("42px") 返回 42（从开头解析到非数字停止），而 Number("42px") 返回 NaN（整体解析，含非数字就失败）。需要从混合文本中提取数字时用 parseFloat，需要严格验证时用 Number()。📖 小节
parseInt(str, radix)解析整数，指定进制避免意外结果；parseFloat(str)解析浮点数isNaN(value)判断是否为 NaN，NaN === NaN为 false，用Number.isNaN更严格- 显式转换：
Number(value)、String(value)、Boolean(value)语义明确比隐式转换更安全 num.toFixed(digits)保留指定位数小数返回字符串，适合金额显示- 类型检测技巧：
typeof检测基本类型，Array.isArray()检测数组，Object.prototype.toString.call()精确检测
📝 作业
- 写一个函数
parseChineseNumber(str)，能解析"3.5元"→3.5、"100人"→100、"约200"→200（用parseFloat）。处理纯文字返回NaN的情况。 - 写一个函数
formatMoney(amount)，接收数字，返回带千分位逗号和两位小数的字符串，如1234567.89→"1,234,567.89"（提示：用toFixed和toString配合数组方法）。 - 写一个函数
getType(value)，弥补typeof的缺陷：对null返回"null"，对数组返回"array"，其余情况返回typeof的结果。
