• Trang chủ
• Học JavaScript
• Số JS

Số JS

Trong hướng dẫn này, bạn sẽ học cách biểu diễn các số trong JavaScript.

Làm việc với các con số

JavaScript hỗ trợ cả số nguyên và số dấu phẩy động có thể được biểu diễn bằng ký hiệu thập phân, thập lục phân hoặc bát phân. Không giống như các ngôn ngữ khác, JavaScript không xử lý số nguyên và số dấu phẩy động khác nhau. Tất cả các số trong JavaScript được biểu diễn dưới dạng số dấu phẩy động. Đây là một ví dụ minh họa các con số ở các định dạng khác nhau:

var x = 2;  // integer number
var y = 3.14;  // floating-point number
var z = 0xff;  // hexadecimal number

Các số cực lớn có thể được biểu diễn theo ký hiệu hàm mũ, ví dụ 6.02e+23 (giống như 6.02x10 ²³ ).

var x = 1.57e4;  // same as 15700
var y = 4.25e+6;  // same as 4.25e6 or 4250000
var z = 4.25e-6;  // same as 0.00000425

Các số cũng có thể được biểu diễn bằng ký hiệu thập lục phân (cơ số 16). Các số thập lục phân có tiền tố là 0x. Chúng thường được sử dụng để đại diện cho màu sắc . Đây là một ví dụ:

var x = 0xff;  // same as 255
var y = 0xb4;  // same as 180
var z = 0x00;  // same as 0

Hoạt động trên số và chuỗi

Như bạn đã biết từ các chương trước, toán tử + được sử dụng cho cả phép cộng và phép nối. Vì vậy, việc thực hiện các phép toán trên các số và chuỗi có thể tạo ra các kết quả thú vị. Ví dụ sau sẽ cho bạn thấy điều gì sẽ xảy ra khi bạn thêm số và chuỗi:

var x = 10;
var y = 20;
var z = "30";

// Adding a number with a number, the result will be sum of numbers
console.log(x + y); // 30

// Adding a string with a string, the result will be string concatenation
console.log(z + z); // '3030'

// Adding a number with a string, the result will be string concatenation
console.log(x + z); // '1030'

// Adding a string with a number, the result will be string concatenation
console.log(z + x); // '3010'

// Adding strings and numbers, the result will be string concatenation
console.log("The result is: " + x + y); // 'The result is: 1020'

// Adding numbers and strings, calculation performed from left to right
console.log(x + y + z); // 'The result is: 3030'

Nếu bạn quan sát kỹ ví dụ trên, bạn sẽ thấy rằng kết quả của thao tác cuối cùng không chỉ là một phép nối chuỗi đơn giản, bởi vì các toán tử có cùng mức độ ưu tiên được đánh giá từ trái sang phải . Đó là lý do tại sao, vì cả hai biến x và y đều là số nên chúng được thêm vào trước, sau đó kết quả được nối với biến z là một chuỗi, do đó kết quả cuối cùng là 30 + "30" = "3030".

Tuy nhiên, nếu bạn thực hiện các phép toán khác như nhân, chia hoặc trừ thì kết quả sẽ khác. JavaScript sẽ tự động chuyển đổi chuỗi số (tức là chuỗi chứa giá trị số) thành số trong tất cả các phép tính số, như minh họa trong ví dụ sau:

var x = 10;
var y = 20;
var z = "30";

// Subtracting a number from a number
console.log(y - x); // 10

// Subtracting a number from a numeric string
console.log(z - x); // 20

// Multiplying a number with a numeric string
console.log(x * z); // 300

// Dividing a number with a numeric string
console.log(z / x); // 3

Hơn nữa, nếu bạn cố gắng nhân hoặc chia các số với các chuỗi không phải là số, nó sẽ trả về NaN(Không phải là Số). Ngoài ra, nếu bạn sử dụng NaNtrong một phép toán, kết quả cũng sẽ là NaN.

var x = 10;
var y = "foo";
var z = NaN;

// Subtracting a number from a non-numeric string
console.log(y - x); // NaN

// Multiplying a number with a non-numeric string
console.log(x * y); // NaN

// Dividing a number with a non-numeric string
console.log(x / y); // NaN

// Adding NaN to a number 
console.log(x + z); // NaN
						
// Adding NaN to a string 
console.log(y + z); // fooNaN

Đại diện cho vô cực

Vô cực đại diện cho một con số quá lớn để JavaScript có thể xử lý. JavaScript có từ khóa đặc biệt Infinityvà -Infinityđể đại diện cho vô cực dương và âm tương ứng. Ví dụ: chia cho 0lợi nhuận Infinity, như minh họa bên dưới:

var x = 5 / 0;
console.log(x); // Infinity

var y = -5 / 0;
console.log(y); // -Infinity

Tránh các vấn đề về độ chính xác

Đôi khi, các thao tác trên số dấu phẩy động tạo ra kết quả không mong muốn, như được hiển thị ở đây:

var x = 0.1 + 0.2;
console.log(x) // 0.30000000000000004

Như bạn có thể thấy kết quả là 0.30000000000000004hơn là mong đợi 0.3. Sự khác biệt này được gọi là lỗi đại diện hoặc lỗi làm tròn . Nó xảy ra vì JavaScript và nhiều ngôn ngữ khác sử dụng dạng nhị phân (cơ số 2) để biểu thị các số thập phân (cơ số 10) bên trong. Thật không may, hầu hết các phân số thập phân không thể được biểu diễn chính xác ở dạng nhị phân, vì vậy sẽ xảy ra những khác biệt nhỏ.

Để tránh vấn đề này, bạn có thể sử dụng giải pháp như thế này:

var x = (0.1 * 10 + 0.2 * 10) / 10;
console.log(x) // 0.3

JavaScript làm tròn số dấu phẩy động thành 17 chữ số, đủ độ chính xác hoặc độ chính xác trong hầu hết các trường hợp. Ngoài ra, trong JavaScript, số nguyên (số không có phần phân số hoặc ký hiệu hàm mũ) có độ chính xác lên tới 15 chữ số, như minh họa trong ví dụ sau:

var x = 999999999999999;
console.log(x); // 999999999999999

var y = 9999999999999999;
console.log(y); // 10000000000000000

Thực hiện các phép toán trên số

JavaScript cung cấp một số thuộc tính và phương thức để thực hiện các thao tác trên các giá trị số. Như bạn đã biết từ các chương trước, trong JavaScript, các kiểu dữ liệu nguyên thủy có thể hoạt động giống như các đối tượng khi bạn tham chiếu đến chúng bằng ký hiệu truy cập thuộc tính (tức là ký hiệu dấu chấm).

Trong các phần sau, chúng ta sẽ xem xét các phương pháp số được sử dụng phổ biến nhất.

Phân tích số nguyên từ chuỗi

Phương thức parseInt()có thể được sử dụng để phân tích một số nguyên từ một chuỗi. Phương pháp này đặc biệt hữu ích trong các tình huống khi bạn đang xử lý các giá trị như đơn vị CSS 50px, 12ptv.v. và bạn muốn trích xuất giá trị số ra khỏi nó.

Nếu phương thứcparseInt() gặp một ký tự không phải là số trong cơ sở đã chỉ định, nó sẽ dừng phân tích cú pháp và trả về giá trị số nguyên được phân tích cú pháp cho đến thời điểm đó. Nếu ký tự đầu tiên không thể chuyển đổi thành số, phương thức sẽ trả về NaN(không phải số).

Không gian hàng đầu và dấu được cho phép. Đây là một ví dụ:

console.log(parseInt("3.14"));  // 3
console.log(parseInt("50px"));  // 50
console.log(parseInt("12pt"));  // 12
console.log(parseInt("0xFF", 16));  // 255
console.log(parseInt("20 years"));  // 20
console.log(parseInt("Year 2048"));  // NaN
console.log(parseInt("10 12 2018"));  // 10

Tương tự, bạn có thể sử dụng phương thức parseFloat()  để phân tích số dấu phẩy động từ một chuỗi. Phương thức parseFloat()hoạt động giống như phương thứcparseInt() , ngoại trừ việc nó truy xuất cả số nguyên và số có phần thập phân.

console.log(parseFloat("3.14"));  // 3.14
console.log(parseFloat("50px"));  // 50
console.log(parseFloat("1.6em"));  // 1.6
console.log(parseFloat("124.5 lbs"));  // 124.5
console.log(parseFloat("weight 124.5 lbs"));  // NaN
console.log(parseFloat("6.5 acres"));  // 6.5

Chuyển đổi số thành chuỗi

Phương thức toString()có thể được sử dụng để chuyển đổi một số thành chuỗi tương đương của nó. Phương thức này tùy chọn chấp nhận tham số số nguyên trong phạm vi từ 2 đến 36 chỉ định cơ sở sẽ sử dụng để biểu thị các giá trị số. Đây là một ví dụ:

var x = 10;
var y = x.toString();
console.log(y);  // '10'
console.log(typeof y);  // string
console.log(typeof x);  // number

console.log((12).toString());  // '12'
console.log((15.6).toString());  // '15.6'
console.log((6).toString(2));  // '110'
console.log((255).toString(16));  // 'ff'

Định dạng số trong ký hiệu hàm mũ

Bạn có thể sử dụng phương thứctoExponential() này để định dạng hoặc biểu diễn một số theo ký hiệu số mũ. Phương thức này tùy chọn chấp nhận tham số số nguyên chỉ định số chữ số sau dấu thập phân. Ngoài ra, giá trị trả về là một chuỗi không phải là một số. Đây là một ví dụ:

var x = 67.1234;

console.log(x.toExponential());  // 6.71234e+1
console.log(x.toExponential(6));  // 6.712340e+1
console.log(x.toExponential(4));  // 6.7123e+1
console.log(x.toExponential(2));  // 6.71e+1

Định dạng số thành số thập phân cố định

Bạn có thể sử dụng phương thứctoFixed() khi muốn định dạng một số có số chữ số cố định ở bên phải dấu thập phân. Giá trị được phương thức này trả về là một chuỗi và nó có số được chỉ định chính xác digitssau dấu thập phân. Nếu digitstham số không được chỉ định hoặc bị bỏ qua, thì tham số đó được coi là 0. Đây là một ví dụ:

var x = 72.635;

console.log(x.toFixed());  // '73' (note rounding, no fractional part)
console.log(x.toFixed(2));  // '72.64' (note rounding)
console.log(x.toFixed(1));  // '72.6'

var y = 6.25e+5;
console.log(y.toFixed(2)); // '625000.00'

var z = 1.58e-4;
console.log(z.toFixed(2));  // '0.00' (since 1.58e-4 is equal to 0.000158)

Định dạng số chính xác

Nếu bạn muốn dạng số phù hợp nhất, bạn có thể sử dụng phương thứctoPrecision() để thay thế. Phương thức này trả về một chuỗi đại diện cho số với độ chính xác đã chỉ định.

Nếu độ chính xác đủ lớn để bao gồm tất cả các chữ số của phần nguyên của số, thì số đó được định dạng bằng cách sử dụng ký hiệu điểm cố định. Mặt khác, số được định dạng bằng cách sử dụng ký hiệu hàm mũ. Tham số độ chính xác là tùy chọn. Đây là một ví dụ:

var x = 6.235;

console.log(x.toPrecision());  // '6.235'
console.log(x.toPrecision(3));  // '6.24' (note rounding)
console.log(x.toPrecision(2));  // '6.2'
console.log(x.toPrecision(1));  // '6'

var y = 47.63;
console.log(y.toPrecision(2)); // '48' (note rounding, no fractional part)

var z = 1234.5;
console.log(z.toPrecision(2));  // '1.2e+3'

Tìm số lớn nhất và nhỏ nhất có thể

Đối tượng Number cũng có một số thuộc tính được liên kết với nó. Các thuộc tính Number.MAX_VALUEvà Number.MIN_VALUEcủa đối tượng Number đại diện cho các số dương lớn nhất và nhỏ nhất (gần bằng 0 nhất, không âm nhất) mà JavaScript có thể xử lý. Chúng là hằng số và giá trị thực của chúng lần lượt là 1.7976931348623157e+308, và 5e-324.

Một số nằm ngoài phạm vi các số có thể được biểu thị bằng một hằng Number.POSITIVE_INFINITYsố hoặc Number.NEGATIVE_INFINITY. Đây là một ví dụ:

var a = Number.MAX_VALUE;
console.log(a); // 1.7976931348623157e+308

var b = Number.MIN_VALUE;
console.log(b); // 5e-324

var x = Number.MAX_VALUE * 2;
console.log(x); // Infinity

var y = -1 * Number.MAX_VALUE * 2;
console.log(y); // -Infinity

Ngoài ra, hãy xem chương phép toán JavaScript để tìm hiểu về cách làm tròn số, tạo số ngẫu nhiên, tìm giá trị lớn nhất hoặc nhỏ nhất từ ​​một tập hợp số, v.v.