Javascript – Một số mẹo giúp chuyển đổi String sang Number

Tram Ho

Làm việc với javascript chắc hẳn không ít lần chúng ta cần chuyển đổi kiểu dữ liệu từ String sang Number. Trong bài viết này mình sẽ giới thiệu một số cách hữu hiệu mà mình thường hay dùng.

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ụ

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

parseFloat()

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

Math.floor()

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

.ue98d74b58babf3bb4295408c9f5f4421 { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .ue98d74b58babf3bb4295408c9f5f4421:active, .ue98d74b58babf3bb4295408c9f5f4421:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .ue98d74b58babf3bb4295408c9f5f4421 { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .ue98d74b58babf3bb4295408c9f5f4421 .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .ue98d74b58babf3bb4295408c9f5f4421 .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .ue98d74b58babf3bb4295408c9f5f4421:hover .postTitle { text-decoration: underline!important; }

  Làm thế nào để ép kiểu Integer cho một số hoặc một string số trong Javascript

.u1aaff6fd6c8cd661330813761d30f70c { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .u1aaff6fd6c8cd661330813761d30f70c:active, .u1aaff6fd6c8cd661330813761d30f70c:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u1aaff6fd6c8cd661330813761d30f70c { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u1aaff6fd6c8cd661330813761d30f70c .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .u1aaff6fd6c8cd661330813761d30f70c .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .u1aaff6fd6c8cd661330813761d30f70c:hover .postTitle { text-decoration: underline!important; }

  Bạn đã thực sự hiểu rõ String chưa?

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ụ

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

Number() function

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.

Toán tử dịch bit

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()

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ố.

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

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.

.ucc0792a915423486e7492e7183fe80ce { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .ucc0792a915423486e7492e7183fe80ce:active, .ucc0792a915423486e7492e7183fe80ce:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .ucc0792a915423486e7492e7183fe80ce { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .ucc0792a915423486e7492e7183fe80ce .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .ucc0792a915423486e7492e7183fe80ce .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .ucc0792a915423486e7492e7183fe80ce:hover .postTitle { text-decoration: underline!important; }

  9 mẹo và thủ thuật cho Chrome Dev Tools

.ud5b6f940f0c87eacb8a3bf310d91d18e { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .ud5b6f940f0c87eacb8a3bf310d91d18e:active, .ud5b6f940f0c87eacb8a3bf310d91d18e:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .ud5b6f940f0c87eacb8a3bf310d91d18e { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .ud5b6f940f0c87eacb8a3bf310d91d18e .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .ud5b6f940f0c87eacb8a3bf310d91d18e .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .ud5b6f940f0c87eacb8a3bf310d91d18e:hover .postTitle { text-decoration: underline!important; }

  8 mẹo tự học cách viết code để trở thành developer

Chia sẻ bài viết ngay

Nguồn bài viết : viblo