Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptメソッド：toFixed（）–数値メソッド

JavaScriptにはNumberオブジェクトメソッドがあり、数値に固定小数点を設定して文字列として返すことができます。この記事では、このメソッドの構文について説明し、その使用方法を説明します。

JavaScriptでプリミティブについて話すときは、オブジェクトではなく、メソッドが関連付けられていないアイテムについて話します。プリミティブ値を取得してオブジェクトにしたい場合は、値またはデータ型を回避できるプリミティブラッパーを使用してそれを行うことができます。

数値にはプリミティブラッパーオブジェクトがあります。これを使用して、数値の文字列表現を、実行可能なメソッドを持つ実際のNumberオブジェクトに変換します。

たとえば、ユーザーが画面上のフィールドに数値を挿入する必要があるフォームがあったため、数値の文字列表現があるとします。その入力を取得して数値に変換し、任意の数のメソッドを使用してその値を処理できます。 

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <form onsubmit=handleSubmit(event)>
     <label for="to-fixed">Enter a number:</label>
     <input id="to-fixed" onchange=handleChange(event) type="text" name="inputVal" value=""/>
     <label for="num-digits">Num places:</label>
     <input id="num-digits" onchange=handleChange(event) type="text" name="numVal" value=""/>
 
     <input type="submit" value="Submit" />
   </form>
 
   <h3 id="root"></h3>
 
   <script>
     let inputVal = '';
     let numVal = '';
 
     const handleChange = e => {
       if(e.target.name === "inputVal") {
         inputVal = e.target.value;
       } else {
         numVal = e.target.value;
       }
       console.log(e.currentTarget, e.target)
 
     }
     const handleSubmit = e => {
       e.preventDefault();
       console.log(e)
       const root = document.querySelector("#root");
       root.innerHTML = Number(inputVal).toFixed(Number(numVal));
       console.log(Number(inputVal).toFixed(5))
 
     }
     const inputValue = document.getElementById("to-fixed").value
   </script>
 </body>
</html>

ここでは、NumberオブジェクトのtoFixed（）メソッドを使用して、数値を必要な長さにしました。メソッドの構文は次のとおりです。 

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

フォームを扱う場合、覚えておく必要のあることが1つあります。これらの値は文字列として入力されます。したがって、toFixed() を使用するには それらのメソッドでは、それらを数値表現に変換する必要があります。

ここでは、Number（n）ラッパーを使用して入力をカプセル化することでこれを行います。最初の変数xは、短くしたい（または場合によっては長くしたい）浮動小数点数です。 2番目の変数yは、小数点を超えて数値を出力する桁数です。

これらの数値のいくつかを自分で試して、コードエディタで何が返されるかを確認してください。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

Enter a number:         Num places:
//floats
45.45678                3  // Returns '45.457'
//integers
45                    	 5  // Returns '45.00000'
//exponential notation
1e-10                   3  // Returns '0.00'
1.23e+20                2  // Returns '123000000000000000000.00'
1.23e-10                2  // Returns '0.00'

ご覧のとおり、桁数はNumPlaces入力に接続したy変数に基づいて調整されます。数値がPlacesの数の値を補うのに十分な長さでない場合は、目的の長さに達するまで文字列にゼロが埋め込まれます。

数値が長く、入力された数値が小数点以下の使用可能な桁よりも短い場合は、数値が短くなり、末尾が四捨五入されて、数値の目的の文字列表現が返されます。

注意 ：操作して返された後、ロジックで数値として操作する場合は、上記のようにNumberプリミティブラッパーを使用して数値に戻す必要があります。

次に何を学ぶか？

JavaScript乱数：完全なガイド

JavaScript ParseInt：ステップバイステップガイド

JavaScriptカウントダウンタイマー：チュートリアル

JavaScript toString

JavaScripttoUpperCaseおよびtoLowerCase


  1. JavaScriptでメソッドを共有する

    メソッドは、オブジェクトのプロトタイププロパティにアタッチすることで共有できます。これらのメソッドは、オブジェクトのすべてのインスタンス間で共有されます。 以下はJavaScriptでメソッドを共有するためのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-

  2. JavaScriptの番号パターン

    ユーザーにテキスト入力とボタンを提供するJavaScriptおよびHTMLプログラムを作成する必要があります。ユーザーが入力に任意の値（たとえば5）を入力してボタンをクリックすると、画面に次のパターンが印刷されます。 （n =5の場合） 01 01 02 01 02 03 01 02 03 04 01 02 03 04 05 例 このためのコードは-になります <html> <head> <title>JavaScript Number Patterns</title> <script type="text/javascrip