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

admin 2026年02月06日 08:59 102 0

在jQuery中实现不四舍五入截取小数点后两位，可通过数学运算直接处理，核心思路是将数值乘以100后截断小数部分，再除以100，避免四舍五入影响，具体方法为：使用Math.trunc()（或Math.floor()）对乘以100后的数值截断小数，再除以100，定义函数function cutDecimal(num){return Math.trunc(num * 100)/100;}，调用时传入数值即可，此方法兼容jQuery环境，直接操作数值，无需额外插件，能精准截取两位小数且不进行四舍五入处理。

jQuery实现小数点后两位不四舍五入截取的实用方法

在Web开发中，处理数字格式化是常见需求，当显示价格、统计数据或财务数据时，经常需要将小数点后截取至固定位数，JavaScript原生的toFixed()方法虽然能实现小数位控制，但其核心逻辑是"四舍五入"，这与部分业务场景（如精确计算、金额展示）的需求相悖，本文将详细介绍如何在jQuery中实现"不四舍五入截取小数点后两位"的功能，提供多种实用方案,并分析其适用场景。

为什么`toFixed()`不满足需求？

先看一个简单示例：

let num = 3.14159;
console.log(num.toFixed(2)); // 输出: "3.15"（四舍五入）

toFixed()会自动对小数点后第三位进行四舍五入，导致截取结果不符合"直接截断"的需求，若要实现"不四舍五入",需借助其他方法。

原生JS实现不四舍五入截取

在封装jQuery方法前，先明确原生JS的实现逻辑，核心思路是通过数学运算或字符串处理，直接截取小数点后指定位数，避免四舍五入,以下是两种常见方案：

数学运算（适用于正数）

通过乘以100后取整，再除以100,实现小数点后两位截取：

function toFixedNoRounding(num, digits = 2) {
    const factor = Math.pow(10, digits);
    return Math.floor(num * factor) / factor;
}
console.log(toFixedNoRounding(3.14159)); // 3.14
console.log(toFixedNoRounding(2.6789));  // 2.67
console.log(toFixedNoRounding(5));       // 5（自动补0需额外处理）

注意：此方法对负数可能失效（如-3.14159会得到-3.14，但实际可能需要-3.14或-3.15，需根据业务调整），若需支持负数，可改用Math.trunc()（ES6）：

function toFixedNoRounding(num, digits = 2) {
    const factor = Math.pow(10, digits);
    return Math.trunc(num * factor) / factor;
}

字符串处理（通用性强）

将数字转为字符串，通过split()分割小数部分，直接截取指定位数,避免浮点数精度问题：

function toFixedNoRounding(num, digits = 2) {
    const str = num.toString();
    const dotIndex = str.indexOf('.');
    // 无小数点或小数位不足，直接补0
    if (dotIndex === -1 || str.length - dotIndex - 1 <= digits) {
        return str + '.'.padEnd(digits + 1, '0');
    }
    // 截取小数点后指定位数
    return str.slice(0, dotIndex + 1 + digits);
}
console.log(toFixedNoRounding(3.14159)); // "3.14"
console.log(toFixedNoRounding(2.6789));  // "2.67"
console.log(toFixedNoRounding(5));       // "5.00"
console.log(toFixedNoRounding(7.899));   // "7.89"

此方法的优势是兼容正负数、自动补零，且避免了浮点数运算的精度问题（如1 + 0.2 = 0.30000000000000004）。

封装jQuery方法

jQuery作为流行的JavaScript库，提供了强大的DOM操作和扩展能力，我们可以将上述原生JS方法封装为jQuery插件，方便在项目中复用,以下是完整的jQuery插件实现：

(function($) {
    /**
     * 不四舍五入截取小数点后指定位数
     * @param {number|jQuery} num - 要处理的数字或包含数字的jQuery对象
     * @param {number} digits - 保留的小数位数，默认为2
     * @returns {string} 格式化后的数字字符串
     */
    $.toFixedNoRounding = function(num, digits) {
        // 处理jQuery对象
        if (num instanceof $) {
            return num.map(function() {
                return $.toFixedNoRounding($(this).text(), digits);
            }).get();
        }
        // 处理非数字输入
        if (typeof num !== 'number' || isNaN(num)) {
            console.warn('toFixedNoRounding: 输入必须为有效数字');
            return num.toString();
        }
        digits = digits || 2;
        const str = num.toString();
        const dotIndex = str.indexOf('.');
        // 无小数点或小数位不足，直接补0
        if (dotIndex === -1 || str.length - dotIndex - 1 <= digits) {
            return str + '.'.padEnd(digits + 1, '0');
        }
        // 截取小数点后指定位数
        return str.slice(0, dotIndex + 1 + digits);
    };
    /**
     * jQuery方法扩展 - 在DOM元素上使用toFixedNoRounding
     * @param {number} digits - 保留的小数位数，默认为2
     * @returns {jQuery} 返回当前jQuery对象，支持链式调用
     */
    $.fn.toFixedNoRounding = function(digits) {
        return this.each(function() {
            const $this = $(this);
            const text = $this.text();
            const num = parseFloat(text);
            if (!isNaN(num)) {
                $this.text($.toFixedNoRounding(num, digits));
            }
        });
    };
})(jQuery);

使用示例

基本用法

// 直接调用静态方法
let price = 99.999;
console.log($.toFixedNoRounding(price)); // "99.99"
// 在jQuery元素上使用
$('.price').toFixedNoRounding();

实际应用场景

// 购物车价格计算
$('.cart-item-price').toFixedNoRounding(2);
// 统计数据展示
$('.stat-value').toFixedNoRounding(2);
// 动态更新价格
function updatePrice() {
    const originalPrice = 123.456;
    $('.original-price').text(originalPrice);
    $('.discount-price').text($.toFixedNoRounding(originalPrice * 0.8, 2));
}

高级应用

结合其他jQuery插件使用

// 与jQuery Validation插件配合
$.validator.methods.number = function(value, element) {
    value = $.trim(value);
    if (value === '') return false;
    return !isNaN($.toFloat(value));
};
// 与jQuery UI NumberSpinner配合
$('#price-spinner').spinner({
    step: 0.01,
    min: 0,
    change: function(event, ui) {
        $(this).toFixedNoRounding(2);
    }
});

自定义格式化选项

// 扩展插件以支持更多格式化选项
$.toFixedNoRounding = function(num, options) {
    options = $.extend({
        digits: 2,
        thousandSeparator: ',',
        decimalSeparator: '.',
        prefix: '',
        suffix: ''
    }, options);
    let formatted = $.toFixedNoRounding(num, options.digits);
    // 添加千位分隔符
    if (options.thousandSeparator) {
        const parts = formatted.split(options.decimalSeparator);
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, options.thousandSeparator);
        formatted = parts.join(options.decimalSeparator);
    }
    return options.prefix + formatted + options.suffix;
};

性能优化建议

批量处理：当处理大量元素时，使用$.map()或$.each()代替多次调用
缓存结果：对于频繁使用的数字，可以缓存格式化后的结果
事件委托：对于动态添加的元素，使用事件委托而非直接绑定

// 批量处理示例
const formattedPrices = $('.price-list').map(function() {
    return $.toFixed