异常教程

JavaScript trunc() 方法（建议收藏）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在 JavaScript 开发中，数值的截断和取整是常见的操作需求。无论是处理价格计算、坐标定位，还是数据可视化，开发者都需要精准控制数值的显示或计算方式。本文将深入讲解 JavaScript trunc() 方法，从基础语法到高级应用，帮助读者掌握这一工具的核心逻辑与实际场景的使用技巧。通过结合生动的比喻和代码示例，我们逐步解析该方法的特点与优势，同时对比其他取整方法的差异，让学习过程更直观易懂。

方法概述：trunc() 的基本定义与语法

trunc() 方法是 JavaScript 中用于截断数值的小数部分，直接返回整数部分的函数。其语法简单直观：

Math.trunc(value)

其中，value 是需要处理的数值或可转换为数值的值。该方法的核心逻辑可以比喻为“数字切片机”——就像用刀直接切掉数字后的小数部分，仅保留整数部分。例如：

Math.trunc(4.7);   // 返回 4  
Math.trunc(-3.2);  // 返回 -3

通过这个比喻，我们可以快速理解 trunc() 的工作原理：它不进行四舍五入或向上/向下取整，而是直接“截断”小数部分。

基础用法：不同数值类型的处理

正数与负数的截断

对于正数，trunc() 的效果与直接取整相同：

Math.trunc(12.9); // 12  
Math.trunc(5.0);  // 5

对于负数，截断逻辑同样适用，但需要注意符号的保留：

Math.trunc(-7.8); // -7  
Math.trunc(-2.3); // -2

这里可以想象为“保留数字的符号，仅截断小数部分”，与 Math.floor() 的行为形成对比（floor() 对负数会向下取整，如 Math.floor(-7.8) 返回 -8）。

处理非数值类型

如果传入非数值类型，trunc() 会尝试将其转换为数值：

Math.trunc("123");    // 123（字符串转数字）  
Math.trunc(true);     // 1（布尔值转数字）  
Math.trunc("abc");    // NaN（无法转换）

对于无法转换的值，trunc() 返回 NaN，与 Number() 转换规则一致。

特殊情况与边界值

处理 Infinity 和 NaN

当输入为 Infinity 或 NaN 时，trunc() 的行为如下：

Math.trunc(Infinity); // Infinity  
Math.trunc(NaN);      // NaN

此时，方法直接返回输入值本身，不进行截断操作。

处理整数与无小数部分的数值

如果输入本身就是整数或没有小数部分，trunc() 不会改变其值：

Math.trunc(42);       // 42  
Math.trunc(3.0);      // 3

这种特性使其适用于需要“净化”数值格式的场景，例如将浮点数 3.0 显式转为整数 3。

与类似方法的对比：trunc() vs 其他取整函数

JavaScript 提供了多个数值取整方法，包括 Math.floor()、Math.ceil()、Math.round() 和 Math.trunc()。它们的核心区别在于对小数部分的处理逻辑：
| 方法 | 逻辑描述 | 示例：处理 -2.7 | 示例：处理 3.8 |
|--------------------|--------------------------------------------------------------------------|-------------------------|-------------------------|
| Math.trunc() | 直接截断小数部分，保留整数部分 | -2 | 3 |
| Math.floor() | 向下取整（比当前数小的最大整数） | -3 | 3 |
| Math.ceil() | 向上取整（比当前数大的最小整数） | -2 | 4 |
| Math.round() | 四舍五入取整 | -3（0.7 向下舍入？） | 4 |

注意：Math.round(-2.7) 的结果为 -3，因为四舍五入规则对负数同样适用。

通过对比表格和示例，可以清晰看出 trunc() 的独特性：它不依赖数值的正负或小数的大小，而是统一“切除”小数部分。这一特性使其在需要保留数值符号且仅截断小数的场景中更为适用。

实际案例与代码示例

案例 1：价格计算的截断处理

假设需要将用户输入的价格截断到整数部分，忽略分位：

function truncatePrice(price) {  
  return Math.trunc(price);  
}  

console.log(truncatePrice(99.99)); // 99  
console.log(truncatePrice(123.45)); // 123

此场景下，trunc() 可避免因四舍五入导致的精度误差，确保直接保留整数部分。

案例 2：坐标点的整数化

在游戏开发或图表绘制中，坐标可能需要强制为整数以避免像素偏移：

let x = 15.6;  
let y = -7.3;  

x = Math.trunc(x); // 15  
y = Math.trunc(y); // -7  

// 使用截断后的坐标更新元素位置  
element.style.left = `${x}px`;  
element.style.top = `${y}px`;

通过 trunc()，坐标值被直接转换为整数，避免了浮点数的小数部分影响渲染。

案例 3：处理字符串输入的兼容性

当输入可能包含非数值字符串时，需结合条件判断：

function safeTruncate(input) {  
  const num = Number(input);  
  return isNaN(num) ? "无效输入" : Math.trunc(num);  
}  

console.log(safeTruncate("42"));     // 42  
console.log(safeTruncate("3.14"));   // 3  
console.log(safeTruncate("abc"));    // "无效输入"

此示例展示了如何在输入类型不确定时，先转为数值再处理，避免直接返回 NaN。

浏览器兼容性与注意事项

浏览器支持情况

trunc() 方法是 ES6 的新增功能，因此在旧版浏览器（如 IE）中可能不兼容。开发者可通过以下方式验证支持性：

if (typeof Math.trunc === "function") {  
  // 安全使用  
} else {  
  // 提供替代方案，如自定义函数  
}

对于不支持的环境，可自行实现类似逻辑：

Math.trunc = Math.trunc || function(value) {  
  return value < 0 ? Math.ceil(value) : Math.floor(value);  
};

此替代方案通过结合 ceil() 和 floor() 模拟 trunc() 的行为。

需要避免的常见误区

  1. 与 parseInt() 的区别：
    trunc() 处理浮点数，而 parseInt() 用于解析字符串为整数。两者用途不同，不可混用。

    Math.trunc("123.45"); // 123  
parseInt("123.45");   // 123（但会解析字符串，忽略小数点后的字符）

  2. 对 NaN 和非数值的处理：
    若输入无法转换为数值，trunc() 直接返回 NaN，需通过条件判断避免后续逻辑出错。

最佳实践与场景选择

推荐使用场景

  • 需要保留数值符号且仅截断小数：如坐标、价格等场景。
  • 避免四舍五入的精度问题：例如统计中需保留原始数值的整数部分。

需谨慎的情况

  • 负数的特殊需求：若需向下取整（如 Math.floor() 的效果），则不能使用 trunc()。
  • 对非数值输入的容错性要求高：需提前验证输入类型，避免意外返回 NaN。

结论

通过本文的讲解，读者应已掌握 JavaScript trunc() 方法的核心功能、使用场景及与其他取整方法的差异。这一工具在数值截断场景中提供了简洁高效的解决方案，尤其适用于需要保留符号且直接切除小数部分的场景。开发者需结合实际需求，结合兼容性处理与输入验证，最大化其应用价值。掌握 trunc() 的同时，建议对比学习其他取整方法，以构建更全面的数值处理能力，为复杂逻辑设计提供坚实基础。

最新发布

查看更多文章