不四舍五入截取小数点两位jquery

admin 2026年02月18日 01:22 103 0

本文介绍使用jQuery实现数值小数点两位不四舍五入截取的方法，通过将数值乘以100后取整（如使用Math.floor或位运算|0），再除以100，可精确截取小数点后两位，避免四舍五入误差，该方法适用于价格计算、数据展示等场景，确保数值显示的精确性，满足业务中对小数位数的严格要求，操作简单且兼容性强。

jQuery实现小数点后两位精确截取（不四舍五入）方法详解

在数据处理中，尤其是财务、统计等场景，我们常需要对小数进行"截断"而非"四舍五入"处理，在金额计算中，四舍五入可能导致累计误差，而直接截断小数点后两位能保证数据的精确性，本文将结合jQuery，介绍如何实现小数点后两位的不四舍五入截取,并提供多种实用场景的代码示例。

为什么需要"不四舍五入"截取？

JavaScript原生提供了toFixed()方法用于保留指定位数的小数，但其核心逻辑是"四舍五入",这在某些场景下并不适用。

(1.235).toFixed(2) // "1.24"
(1.234).toFixed(2) // "1.23"

从上面的示例可以看出，toFixed()会按照四舍五入规则处理小数位，这在财务计算中可能会导致累计误差,我们需要一种能够精确截断小数而不进行四舍五入的方法。

使用JavaScript原生函数配合jQuery

虽然jQuery本身不提供直接的小数截断功能,但我们可以结合原生JavaScript函数来实现：

// 定义jQuery插件
$.fn.toFixedWithoutRounding = function(decimalPlaces) {
    return this.each(function() {
        var value = parseFloat($(this).text());
        if (isNaN(value)) return;
        // 截断小数
        var factor = Math.pow(10, decimalPlaces);
        var truncated = Math.floor(value * factor) / factor;
        $(this).text(truncated.toFixed(decimalPlaces));
    });
};
// 使用示例
$(".price").toFixedWithoutRounding(2);

使用正则表达式实现

正则表达式是处理字符串的强大工具,我们可以用它来精确截断小数：

// 定义jQuery插件
$.fn.truncateDecimals = function(decimalPlaces) {
    return this.each(function() {
        var value = $(this).text();
        var regex = new RegExp("^(-?\\d+\\.\\d{" + decimalPlaces + "})\\d*$");
        var match = value.match(regex);
        if (match) {
            $(this).text(match[1]);
        }
    });
};
// 使用示例
$(".amount").truncateDecimals(2);

数学运算方法

通过数学运算实现小数截断,这种方法更加精确：

// 定义jQuery插件
$.fn.decimalTruncate = function(decimalPlaces) {
    return this.each(function() {
        var value = parseFloat($(this).text());
        if (isNaN(value)) return;
        // 使用位运算进行截断
        var truncated = Math.trunc(value * Math.pow(10, decimalPlaces)) / Math.pow(10, decimalPlaces);
        $(this).text(truncated.toFixed(decimalPlaces));
    });
};
// 使用示例
$(".number").decimalTruncate(2);

实际应用场景

财务表格处理

// 处理表格中的金额列
$("table.financial td.amount").each(function() {
    var value = parseFloat($(this).text());
    if (!isNaN(value)) {
        $(this).text(decimalTruncate(value, 2));
    }
});
// 辅助函数
function decimalTruncate(num, decimalPlaces) {
    var factor = Math.pow(10, decimalPlaces);
    return Math.floor(num * factor) / factor;
}

实时计算器

// 计算器输入处理
$("#calculator input").on("input", function() {
    var result = calculateResult();
    $("#result").text(decimalTruncate(result, 2));
});
// 计算函数示例
function calculateResult() {
    var num1 = parseFloat($("#num1").val()) || 0;
    var num2 = parseFloat($("#num2").val()) || 0;
    return num1 + num2;
}

性能优化建议

缓存选择器结果：在循环中使用jQuery选择器时,尽量缓存结果：

// 不推荐
$(".item").each(function() {
    $(this).css("color", "red");
});
// 推荐
var $items = $(".item");
$items.each(function() {
    $(this).css("color", "red");
});

减少DOM操作：尽量一次性完成样式或文本的更新：

// 不推荐
$(".price").each(function() {
    $(this).text(decimalTruncate(parseFloat($(this).text()), 2));
});
// 推荐
var prices = $(".price").map(function() {
    return decimalTruncate(parseFloat($(this).text()), 2);
}).get();
$(".price").text(function(i) {
    return prices[i];
});