Làm sao để convert String sang Number trong JavaScript?

JavaScript cung cấp nhiều cách khác nhau để convert String sang Number. Và trong bài viết này, mình sẽ tổng hợp lại một số cách mà mình đã biết.

Sử dụng Number() function

Đúng vậy, đó là Number() function chứ không phải Number() constructor.

Vì Number() constructor (là khi bạn sử dụng với từ khoá new) sẽ tạo mới một Number Object với rất nhiều thứ kèm theo. Còn Number() function sẽ tạo ra một số thông thường (primitive).

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

const y = Number("6666");
console.log(y); // => 6666

Một số ví dụ khác:

const x = Number('66,66');
console.log(x); // => NaN

const y = Number('66.66');
console.log(y); // => 66.66

const z = Number('66666');
console.log(z); // => 66666

Qua ví dụ trên, bạn thấy rằng: nếu String truyền vào không phải Number thì kết quả thu được là NaN; nếu tham số truyền vào không phải số nguyên thì kết quả không bị làm tròn.

Sử dụng parseInt() và parseFloat()

Phương thức parseInt()

Phương thức parseInt() là một giải pháp thường hay được sử dụng. Phương thức này sẽ parse String tuỳ theo hệ cơ số xác định. Vì vậy, mình đã thường xuyên sử dụng cách này để convert String sang Number trong JavaScript.

Ví dụ:

const x = parseInt('1000.12', 10);
console.log(x); // => 1000

const y = parseInt('1000', 16);
console.log(y); // => 4096

const z = parseInt('1000', 8);
console.log(z); // => 512

const t = parseInt('1000', 2);
console.log(t); // => 8 

Với giá trị của hệ cơ số hợp lệ là từ 2 đến 36. Trong trường hợp bạn không truyền giá trị của hệ cơ số vào thì JavaScript sẽ tự parse theo nguyên tắc:

  • 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

Ví dụ:

const x = parseInt('1000.12');
console.log(x); // => 1000

const y = parseInt('0x1000');
console.log(y); // => 4096

const z = parseInt('01000');
console.log(z); // => 1000

const t = parseInt('b1000');
console.log(t); // => NaN

Kết quả có vẻ hơi khó đoán nhỉ?

Theo mình, tốt nhất là luôn truyền vào giá trị của hệ cơ số muốn parse để luôn thu được giá trị như mong muốn.

Phương thức parseFloat()

Nếu như phương thức parseInt() luôn trả về kết quả là một số nguyên thì phương thức parseFloat() sẽ trả về kết quả là một số float.

Ví dụ:

const x = parseFloat('1000,12', 10);
console.log(x); // => 1000

const y = parseFloat('1000.12', 10);
console.log(y); // => 1000.12

const z = parseFloat('1000.120', 10);
console.log(z); // => 1000.12

const t = parseFloat('1000', 10);
console.log(t); // => 1000

Sử dụng toán tử +

Ví dụ:

const x = +'1000,12';
console.log(x); // => NaN

const y = +'1000.12';
console.log(y); // => 1000.12

const z = +'1000.120';
console.log(z); // => 1000.12

const t = +'1000';
console.log(t); // => 1000

Sử dụng Math.floor()

Phương thức Math.floor() khá giống với phương thức parseInt() phía trên.

Ví dụ:

const x = Math.floor('1000.12');
console.log(x); // => 1000

const y = Math.floor('0x1000');
console.log(y); // => 4096

const z = Math.floor('01000');
console.log(z); // => 1000

const t = Math.floor('b1000');
console.log(t); // => NaN

Sử dụng toán tử *

Ví dụ:

const x = '1000,12' * 1;
console.log(x); // => NaN

const y = '1000.12' * 1;
console.log(y); // => 1000.12

const z = '1000.120' * 1;
console.log(z); // => 1000.12

const t = '1000' * 1;
console.log(t); // => 1000

Sử dụng toán tử /

Ví dụ:

const x = '1000,12' / 1;
console.log(x); // => NaN

const y = '1000.12' / 1;
console.log(y); // => 1000.12

const z = '1000.120' / 1;
console.log(z); // => 1000.12

const t = '1000' / 1;
console.log(t); // => 1000

Sử dụng toán tử -

Ví dụ:

const x = '1000,12' - 0;
console.log(x); // => NaN

const y = '1000.12' - 0;
console.log(y); // => 1000.12

const z = '1000.120' - 0;
console.log(z); // => 1000.12

const t = '1000' - 0;
console.log(t); // => 1000

Sử dụng Bitwise not ~~

Ví dụ:

const x = ~~'1000,12';
console.log(x); // => 0

const y = ~~'1000.12';
console.log(y); // => 1000

const z = ~~'1000.120';
console.log(z); // => 1000

const t = ~~'1000';
console.log(t); // => 1000

Sử dụng toán tử dịch >>>

Ví dụ:

const x = '1000,12' >>> 0;
console.log(x); // => 0

const y = '1000.12' >>> 0;
console.log(y); // => 1000

const z = '1000.120' >>> 0;
console.log(z); // => 1000

const t = '1000' >>> 0;
console.log(t); // => 1000

Lời kết

Trên đây là một số cách để convert String sang Number trong JavaScript. Để so sánh tốc độ giữa các cách này, bạn có thể tham khảo và viết thêm testcase để so sánh tại Convert a string to a number using JavaScript.

alt text

Ngoài ra, bạn thường hay sử dụng cách nào để convert String sang Number trong JavaScript? Mình hy vọng được biết thêm nhiều cách khác nữa của bạn trong phần bình luận phía dưới!

Xin chào và hẹn gặp lại, thân ái!


★ Nếu bạn thấy bài viết này hay thì hãy ghé thăm Blog hoặc theo dõi mình trên Facebook để nhận được thông báo khi có bài viết mới nhất nhé:

☛ Blog: Complete JavaScript
☛ Facebook Fanpage: Complete JavaScript
☛ Facebook Group: Hỏi đáp JavaScript VN

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Lam Pham

28 bài viết.
70 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
31 12
Trước khi vào nội dung bài viết. Tôi xin đính chính giúp anh trả lời những câu hỏi chỉ là tựa đề của một bài hát tôi không có ý xưng hô là anh. Bài...
Lam Pham viết 1 năm trước
31 12
White
14 6
Có thể bạn thừa biết, JavaScript là một ngôn ngữ chạy (Link). Điều đó có nghĩa là nếu bạn thực hiện một tác vụ quá lớn trên giao diện chính thì khả...
Lam Pham viết hơn 1 năm trước
14 6
White
14 3
Xin chào bạn Có thể bạn đã biết, JavaScript là một ngôn ngữ lập trình rất mạnh, nhưng lại vô cùng rắc rối, phức tạp. Để có thể nắm vững được Java...
Lam Pham viết 11 tháng trước
14 3
Bài viết liên quan
White
9 0
Có bao giờ bạn thắc mắc, chuyện gì thực sự diễn ra khi chúng ta gõ một địa chỉ trang web (ví dụ: (Link)) lên trình duyệt và nhấn Enter? Đầu tiên, t...
Lam Pham viết hơn 1 năm trước
9 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
28 bài viết.
70 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!