Số trong Javascript

Tìm hiểu về Số trong Javascript

Trong bài hướng dẫn tự học lập trình Javascript này, bạn sẽ được tìm hiểu làm thế nào để sử dụng số (Number) trong Javascript.

1. Làm việc với Số

JavaScript hỗ trợ cả số nguyên (integer) và số có dấu phẩy động (floating-point) có thể được biểu thị 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ý các số nguyên và 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.

Dưới đây là một ví dụ minh họa các con số ở các định dạng khác nhau:

var x = 2;  // Số nguyên (integer)
var y = 3.14;  // Số thập phân
var z = 0xff;  // Số thập lục phân

Số lớn có thể được biểu diễn trong ký hiệu số mũ, ví dụ: 6.02e + 23 (giống như 6.02x10^23).

var x = 1.57e4;  // Giống như 15700
var y = 4.25e+6;  // Giống như 4.25e6 hoặc 4250000
var z = 4.25e-6;  // Giống như 0.00000425

Lưu ý: Số nguyên an toàn lớn nhất trong JavaScript là 9007199254740991 (2^53-1), trong khi số nguyên an toàn nhỏ nhất là -9007199254740991 (- (2^53-1)).

Các số cũng có thể được biểu diễn trong 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;  // Giống như 255
var y = 0xb4;  // Giống như 180
var z = 0x00;  // Giống như 0

Lưu ý: Số nguyên có thể được biểu diễn dưới dạng ký hiệu thập phân, thập lục phân và bát phân. Số dấu phẩy động có thể được biểu diễn bằng ký hiệu thập phân hoặc số mũ.

1.1. Thao tác với Số và Chuỗi

Như bạn đã được học từ bài Toán tử trong Javascript, toán tử + được sử dụng cho cả phép cộng và phép nối.

Vì vậy, thực hiện các phép toán trên số và chuỗi có thể tạo ra kết quả thú vị. Ví dụ sau đây sẽ cho bạn thấy điều gì xảy ra khi bạn cộng số và chuỗi:

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

// Cộng một số với một số. Kết quả là số
console.log(x + y); // 30

// Cộng một chuỗi với một chuỗi. Kết quả là chuỗi
console.log(z + z); // '3030'

// Cộng một số với một chuỗi. Kết quả là chuỗi.
console.log(x + z); // '1030'

// Cộng một chuỗi với một số. Kết quả là chuỗi
console.log(z + x); // '3010'

// Cộng chuỗi với số. Kết quả là chuỗi
console.log("Kết quả là: " + x + y); // 'Kết quả là: 1020'

// Cộng số với chuỗi. Kết quả là chuỗi
console.log(x + y + z); // '3030'

Nếu bạn thấy những ở câu lệnh cuối cùng, bạn sẽ thấy rằng kết quả của các hoạt động cuối cùng là không đơn giản chỉ là nối chuỗi, bởi vì toán tử cùng một ưu tiên được đánh giá từ trái sang phải.

Đó là lý do tại sao, nó cộng x và y trước, sau đó mới lấy kết quả cộng với chuỗi z, do đó kết quả cuối cùng được 30 + '30' = '3030'.

Nhưng, 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 các chuỗi số (nghĩa là các chuỗi chứa các giá trị số) thành các số trong tất cả các hoạt động số, như trong ví dụ sau:

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

// Trừ một số cho một số
console.log(y - x); // 10

// Trừ một chuỗi cho một số
console.log(z - x); // 20

// Nhân một số với một chuỗi
console.log(x * z); // 300

// Chia một chuỗi cho một số
console.log(z / x); // 3

Hơn nữa, nếu bạn cố gắng nhân hoặc chia 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 NaN trong một phép toán, kết quả cũng sẽ là NaN.

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

// Trừ một số cho một chuỗi không phải là số
console.log(y - x); // NaN

// Nhân một số với một chuỗi không phải là số
console.log(x * y); // NaN

// Chia một số cho một chuỗi không phải là số
console.log(x / y); // NaN

// Cộng NaN với một số
console.log(x + z); // NaN
						
// Cộng NaN với một chuỗi
console.log(y + z); // fooNaN

1.2. Số vô cùng

Infinity đại diện cho một số vô cùng lớn. JavaScript có từ khóa Infinity và -Infinity để biểu thị Dương vô cùng và Âm vô cùng.

Ví dụ: Chia cho 0 trả về Infinity, như được minh họa dưới đây:

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

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

Lưu ý: Infinity là một giá trị đặc biệt đại diện cho số vô cùng trong Toán học, lớn hơn bất kỳ số nào. Kiểu của Infinity là kiểu số.

1.3. Cách tránh số không chính xác

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

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

Như bạn có thể thấy kết quả là 0,30000000000000004 chứ không phải là 0,3 dự kiến.

Sự khác biệt này được gọi là representation error or roundoff error . Nó xảy ra do JavaScript và nhiều ngôn ngữ khác sử dụng dạng nhị phân (cơ sở 2) để thể hiện các số thập phân (cơ sở 10).

Và, 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, do đó xảy ra sự khác biệt nhỏ.

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

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 các số nguyên JavaScript (các số không có phần phân số hoặc ký hiệu số mũ) có độ chính xác lên tới 15 chữ số, như được minh họa trong ví dụ sau:

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

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

2. Thực hiện các thao tác 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 bài học trước, trong các Kiểu dữ liệu nguyên thủy của JavaScript có thể hoạt động như các đối tượng khi bạn tham chiếu chúng với ký hiệu truy cập thuộc tính (nghĩa 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 thức số được sử dụng phổ biến nhất.

2.1. Chuyển số chuỗi thành số nguyên trong Javascript

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

Thông thường, trong lập trình web, các dữ liệu mà khách hàng nhập cũng là dạng chuỗi. Nên nếu muốn lấy dữ liệu người dùng để tính toán thì chúng ta cũng phải chuyển đổi từ chuỗi thành số.

>> Bạn sẽ được học xử lý dữ liệu đầu vào kỹ hơn trong Khóa học Lập trình Web PHP Fullstack: https://niithanoi.edu.vn/lap-trinh-web-php.html

Nếu phương thức parseInt() 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ể được chuyển đổi thành một số, phương thức sẽ trả về NaN (không phải là một số). 

Đâ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

Lưu ý: Phương thức parseInt() cắt các số thành các giá trị nguyên, nhưng không nên sử dụng nó để thay thế cho phương thức Math.floor().

Tương tự, bạn có thể sử dụng phương thức parseFloat() để chuyển đổi chuỗi thành số dấu phẩy động.

Phương thức parseFloat() hoạt động giống như phương thức parseInt(), ngoại trừ việc nó lấy cả số nguyên và số có số 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

2.2. Chuyển đổi số thành chuỗi trong Javascript

Phương thức toString() có thể được sử dụng để chuyển đổi một số thành chuỗi tương đương.

Phương thức này tùy ý chấp nhận một tham số nguyên trong phạm vi từ 2 đến 36 chỉ định cơ sở được sử dụng để biểu diễn 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'

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

Bạn có thể sử dụng phương thức toExponential() để định dạng hoặc biểu thị một số theo ký hiệu số mũ.

Phương pháp này tùy ý chấp nhận một tham 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

Lưu ý: Ký hiệu số mũ rất hữu ích để biểu diễn các số có rất lớn hoặc rất nhỏ. Ví dụ: 62500000000 có thể được viết là 625e + 8 hoặc 6.25e + 10

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

Bạn có thể sử dụng phương thức toFixed() khi bạn 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 trả về bởi phương thức này là một chuỗi và nó có số chữ số được chỉ định chính xác sau dấu thập phân.

Nếu tham số chữ số không được chỉ định hoặc bỏ qua, nó được coi là 0.

Đây là một ví dụ:

var x = 72.635;

console.log(x.toFixed());  // '73' (Làm tròn, không có phần thập phân)
console.log(x.toPrecision(2));  // '72.64' (Không làm tròn)
console.log(x.toPrecision(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' (1.58e-4 is equal to 0.000158)

2.5. Định dạng số với độ chính xác

Nếu bạn muốn định dạng thích hợp nhất của một số, bạn có thể sử dụng phương thức toPrecision(). Phương thức này trả về một chuỗi biểu thị số cho độ 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 ký hiệu flexed-point.

Mặt khác, số được định dạng bằng ký hiệu số 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' (Không làm tròn)
console.log(x.toPrecision(2));  // '6.2'
console.log(x.toPrecision(1));  // '6'

var y = 47.63;
console.log(y.toPrecision(2)); // '48' (Làm tròn, không có phần phân số)

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

2.6. Tìm số lớn nhất và số 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_VALUE và Number.MIN_VALUE củ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, 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ủa các số có thể được biểu thị bằng một số không đổi.POSITIVE_INFINITY hoặc Number.NEGECT_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

Bạn đã hiểu cách thao tác với số trong Javascript chưa?

Như vậy là bạn đã được tìm hiểu về một số cách thao tác với Số trong Javascript. Đây là những thao tác cơ bản nhất.

Tuy nhiên, bản chất Javascript là rất linh hoạt trong kiểu dữ liệu, do đó, bạn cần nắm thật vững để không gặp rắc rối sau này.