Định dạng số thành K, M, B, T sử dụng JavaScript

Khi hiển thị các con số lớn như lượt xem, lượt thích, doanh thu… trên giao diện web, bạn nên rút gọn chúng thành dạng viết tắt như K (nghìn), M (triệu), B (tỷ), T (nghìn tỷ). Cách viết này vừa tiết kiệm không gian, vừa giúp người dùng dễ tiếp nhận hơn.

Định dạng số thành K, M, B, T sử dụng JavaScript

JavaScript hỗ trợ việc này rất dễ dàng thông qua đối tượng Intl.NumberFormat.

1. Hàm định dạng số theo phong cách viết tắt

Đây là hàm gọn nhẹ dùng được ngay:

function convertToAbbreviation(number) {
    const formatter = new Intl.NumberFormat('en', {
        notation: 'compact',
        compactDisplay: 'short',
        maximumSignificantDigits: 3
    });
    return formatter.format(number);
}

// Ví dụ sử dụng:
convertToAbbreviation(1234);       // "1.23K"
convertToAbbreviation(5300000);    // "5.3M"

2. Định dạng số theo tiếng Việt

Nếu bạn muốn hiển thị đơn vị viết tắt quen thuộc với người Việt như N, Tr, T, bạn có thể chỉnh lại như sau:

function convertToVietnameseAbbr(number) {
    const formatter = new Intl.NumberFormat('vi', {
        notation: 'compact',
        compactDisplay: 'short',
        maximumSignificantDigits: 3
    });
    return formatter.format(number).replace(',', '.');
}

// Ví dụ:
convertToVietnameseAbbr(1234);       // "1,23 N" -> "1.23 N"
convertToVietnameseAbbr(9800000);    // "9,8 Tr" -> "9.8 Tr"

3. Có thể dùng cho định dạng tiền tệ

Bạn có thể kết hợp Intl.NumberFormat để hiển thị đơn vị tiền tệ cùng lúc:

function formatCurrencyCompact(value, locale = 'vi', currency = 'VND') {
    return new Intl.NumberFormat(locale, {
        style: 'currency',
        currency,
        notation: 'compact',
        compactDisplay: 'short'
    }).format(value);
}

// Ví dụ:
formatCurrencyCompact(13000000); // "13 Tr ₫"

Kết luận

Đây là một tiện ích nhỏ nhưng rất hiệu quả trong việc rút gọn các số lớn – nhất là khi hiển thị trên thiết bị di động hoặc các dashboard giới hạn không gian. Bạn có thể tái sử dụng hàm này trong hệ thống thống kê, bình luận, điểm đánh giá, hoặc bất kỳ nơi nào cần số liệu dễ đọc.

Bình luận


  • Không có bình luận.

Init Toolbox

Nhấn Ctrl + \ trên máy tính, hoặc vuốt sang trái ở bất kỳ đâu trên mobile.

Đăng nhập





Đang tải...