Chuyển đổi String sang Number trong Javascript

01.05.2019

5.0/5 (1 Reviews)

Javascript là một ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển có sẵn hoặc tự định nghĩa ra, javascript được sử dụng rộng rãi trong các ứng dụng Website.

    Javascript là gì?

    Javascript là một ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển có sẵn hoặc tự định nghĩa ra, javascript được sử dụng rộng rãi trong các ứng dụng Website. Javascript được hỗ trợ hầu như trên tất cả các trình duyệt như Firefox, Chrome, ... thậm chí các trình duyệt trên thiết bị di động cũng có hỗ trợ.

    Có thể bạn đã biết đến JAVascript nhưng có bao giờ bạn gặp vấn đề cần chuyển đổi kiểu chuổi sang kiểu số chưa ? Bài viết này sẽ chia sẻ cho các bạn một số hàm có thể làm được điều này.

    Javascript là gì?

    Hàm parserInt().

    Đây là function thường hay được sử dụng dùng để parse string sang number tùy theo hệ cơ số và giá trị trả về luôn là một số nguyên. Ví dụ

    var x = parseInt('100.1', 10);
    x; //=> 100
    

    với hệ cơ số xác định từ 2 -> 36, trong trường hợp không truyền hệ cơ số thì javascript sẽ tự parse theo nguyên tắc sau

    • String bắt đầu bằng "0x" hoặc "0X" => hệ cơ số 16 (hexadecimal)
    • String bắt đầu bằng "0" => hệ cơ số 8 (octal) hoặc 10 (decimal) tuỳ thuộc vào trình duyệt
    • String bắt đầu bằng các số khác thì => hệ cơ số 10 (decimal)
    • String bắt đầu không phải là số => NaN

    Hàm parseFloat().

    Khác với parseInt thì parseFloat sẽ trả về kết quả là một số float. Ví dụ

    var x = parseFloat('100.1');
    x; //=> 100.1
    

    Hàm Math.floor().

    Phương thức này cũng tương tự với parseInt sẽ trả về một số nguyên.

    var x = Math.floor('100');
    x; //=> 100
    

    Toán tử +

    Đây là cách mình thường hay dùng nhất vì nó ngắn gọn và hữu hiệu khi có các giá trị lẫn lộn vừa string vừa number. Ví dụ

    var x = +'100';
    x; //=> 100
    
    var y = +'100.1';
    y; //=> 100.1
    

    Tương tự như + thì các toán tử (-, *, /) cũng tương tự.

    var x = '100' * 1;
    x; //=> 100
    
    var y = '100' / 1;
    y; //=> 100
    
    var z = '100' - 0;
    z; //=> 100
    

    Hàm Number()

    Lưu ý đây là function chứ không phải constructor. Function này sẽ tạo ra 1 số thông thường chứ không phải 1 object number.

    var x = new Number("6666");
    console.log(x); // => Number {6666}
    
    var y = Number("6666");
    console.log(y); // => 6666
    

    Toán tử dịch bit

    var x = '100' >>> 0;
    x; //=> 100
    

    Sử dụng Format number

    Với việc hiển thị một số lớn thì rất khó để quan sát nên cần format chúng để có thể dễ quan sát hơn (100000 => 100,000) Với các số nhỏ thì chúng ta có thể sử dụng phương thức toLocaleString()

    var x = 1000000;
    x.toLocaleString(); //=> "1.000.000"
    

    Nhưng một vấn đề xẩy ra là nếu như số quá lớn với độ dài lớn hơn 16 kí tự thì việc format bằng phương thức này sẽ dẫn đến sai số.

    var x = 111111111111111111;
    x.toLocaleString(); //=> "111,111,111,111,111,100"
    

    Muốn có thể format được các số lớn như vậy thì chúng ta cần phải define một method để làm việc này

    const addCommas = value => {
      const stringFormat = `${value}`;
      const x = stringFormat.split('.');
      let x1 = x[0];
      const x2 = x.length > 1 ? `.${x[1]}` : '';
      const regex = /(\d+)(\d{3})/;
      while (regex.test(x1)) {
        x1 = x1.replace(regex, '$1,$2');
      }
      return x1 + x2;
    };
    var x = '111111111111111111';
    addCommas(x); //=> "111,111,111,111,111,111"
    
    

    Trên đây là một số cách hữu hiệu để chuyển đổi từ String sang Number tùy vào từng trường hợp mà bạn có thể sử dụng chúng.

    CÓ THỂ BẠN QUAN TÂM

    Bài Viết Cùng Chuyên Mục

    XEM THÊM
    thumbnail

    LPStack Server: Giải pháp thay thế XAMPP và MAMP năm 2026

    10.03.2026

    Bạn đã chán ngấy XAMPP hay MAMP chậm chạp? Khám phá LPStack Server – Môi trường Local Development siêu nhẹ của người Việt với Auto Vhost, Public Tunnel, chuyển đổi PHP 1-click và quản lý Database Native chuyên nghiệp

    thumbnail

    Hướng Dẫn Tạo Trò Chơi Cờ Caro Nâng Cao bằng HTML

    19.03.2025

    Chào các bạn! Trong bài viết này, chúng ta sẽ cùng nhau xây dựng một trò chơi Cờ Caro đơn giản nhưng có nhiều tính năng thú vị như giới hạn nước đi, pháo hoa khi chiến thắng, chọn chế độ chơi và đếm thời gian.

    thumbnail

    Xây dựng với các mô hình Gemini trong Project IDX

    13.03.2024

    Một vài tuần trước, Google đã công bố một loạt bản cập nhật sản phẩm cho Project IDX để giúp hợp lý hóa và đơn giản hóa việc phát triển phần mềm đa nền tảng, toàn bộ.

    thumbnail

    Google Project IDX là gì? Những điều bạn chưa biết về Google Project IDX

    22.12.2023

    Google Project IDX là Intelligent Development Xperience. IDX được thiết kế để giúp các nhà phát triển xây dựng ứng dụng nhanh hơn, dễ dàng hơn và hiệu quả hơn.

    thumbnail

    Zalo Mini App là gì? Triển khai Zalo App ở đâu thì uy tín

    15.12.2023

    Zalo Mini App là những ứng dụng nhỏ được triển khai và hoạt động trực tiếp trên nền tảng Zalo