Phương thức toFixed() trong JavaScript – Phương thức của Number

Trong JavaScript tồn tại một phương thức của đối tượng Number cho phép đặt một số thập phân cố định trên một số và trả về dưới dạng chuỗi. Bài viết này sẽ nói về cú pháp của phương thức này và minh họa cách sử dụng.

Kiểu nguyên thủy và đối tượng wrapper

Khi nói về kiểu nguyên thủy (primitive) trong JavaScript, chúng ta đang nói về các mục không phải là Object và không có bất kỳ phương thức nào liên kết. Khi muốn lấy một giá trị nguyên thủy và biến nó thành một đối tượng, chúng ta có thể làm điều đó với các primitive wrapper (đối tượng bao bọc) có thể bao quanh giá trị hoặc kiểu dữ liệu.

Số (Number) có một đối tượng wrapper nguyên thủy. Chúng ta sử dụng nó để chuyển đổi biểu diễn chuỗi của một số thành một đối tượng Number thực tế có các phương thức có thể thực hiện trên nó.

Ví dụ, giả sử chúng ta có một biểu diễn chuỗi của một số vì có một form yêu cầu người dùng nhập giá trị số cho một trường trên màn hình. Chúng ta có thể lấy đầu vào đó, chuyển nó thành Number, sau đó sử dụng bất kỳ phương thức nào để làm việc với giá trị đó.

Ví dụ minh họa với form

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Demo toFixed()</title>
</head>
<body>
  <form onsubmit="handleSubmit(event)">
    <label for="input-number">Nhập số:</label>
    <input id="input-number" onchange="handleChange(event)" type="text" name="inputVal" value=""/>
    <label for="num-digits">Số chữ số thập phân:</label>
    <input id="num-digits" onchange="handleChange(event)" type="text" name="numVal" value=""/>
    <input type="submit" value="Submit" />
  </form>
  <h3 id="result"></h3>
  <script>
    let inputVal = '';
    let numVal = '';
    
    const handleChange = e => {
      if(e.target.name === "inputVal") {
        inputVal = e.target.value;
      } else {
        numVal = e.target.value;
      }
    }
    
    const handleSubmit = e => {
      e.preventDefault();
      const root = document.querySelector("#result");
      root.innerHTML = Number(inputVal).toFixed(Number(numVal));
    }
  </script>
</body>
</html>

Cú pháp

Ở đây, chúng ta đã sử dụng phương thức toFixed() của đối tượng Number để làm cho số có độ dài như mong muốn. Cú pháp của phương thức như sau:

const toFixedNumDigits = Number(x).toFixed(Number(y));

Nếu làm việc với form, có một điều cần nhớ: các giá trị này đến dưới dạng chuỗi. Vì vậy, để sử dụng phương thức toFixed() trên chúng, bạn phải chuyển chúng thành biểu diễn Number.

Chúng ta làm điều đó ở đây bằng cách bao bọc các đầu vào với wrapper Number(n). Biến đầu tiên, x, là số dấu phẩy động bạn muốn rút gọn (hoặc kéo dài, tùy trường hợp). Biến thứ hai, y, là số vị trí bạn muốn số kéo dài ra sau dấu chấm thập phân.

Các ví dụ thực hành

Hãy thử một vài số sau để xem kết quả trả về:

// Số thực (floats)
45.45678, 3  // Trả về '45.457'

// Số nguyên (integers)
45, 5        // Trả về '45.00000'

// Ký pháp mũ (exponential notation)
1e-10, 3     // Trả về '0.00'
1.23e+20, 2  // Trả về '123000000000000000000.00'
1.23e-10, 2  // Trả về '0.00'

Như bạn thấy, số chữ số điều chỉnh dựa trên biến y bạn nhập vào ô "Số chữ số thập phân". Nếu số không đủ dài để bù đắp cho giá trị "Số chữ số thập phân", nó sẽ đệm chuỗi bằng số 0 cho đến khi đạt độ dài mong muốn.

Nếu số dài và đầu vào "Số chữ số thập phân" ngắn hơn các chữ số có sẵn sau dấu chấm thập phân, nó sẽ rút gọn số và làm tròn phần cuối để trả về biểu diễn chuỗi mong muốn của số.

Lưu ý quan trọng: Nếu bạn muốn làm việc với nó như một số trong logic sau khi đã được thao tác và trả về, bạn sẽ phải chuyển nó trở lại thành số bằng cách sử dụng wrapper Number nguyên thủy như chúng ta đã làm ở trên.

Phương thức toFixed() trong JavaScript – Phương thức của Number

Kiểu nguyên thủy và đối tượng wrapper

Ví dụ minh họa với form

Cú pháp

Các ví dụ thực hành

Bài viết liên quan