HTML と JavaScript を使用して文字列を数値に変換する方法

近年、インターネットの急速な発展に伴い、Webフロントエンド技術の重要性はますます高まっており、その中でもHTMLやJavaScript言語は欠かせない基礎技術となっています。フロントエンド開発プロセスでは、特にデータ処理において、文字列を数値に変換することが一般的な要件です。この記事では、HTML と JavaScript を使用して文字列を数値化する関数を実装する方法を紹介します。

1. HTML と JavaScript の予備知識

文字列を数値に変換する方法を説明する前に、まず HTML と JavaScript について簡単に理解しましょう。

1. HTML: 正式名は Hyper Text Markup Language で、中国語ではハイパーテキスト マークアップ言語と訳され、Web ページの作成に使用される標準的なマークアップ言語です。
2. JavaScript: オブジェクトおよびイベント駆動型のスクリプト言語。主に、動的効果、データ対話、データ検証、その他の機能などの Web フロントエンド開発に使用されます。

2. 文字列を数値に変換する方法

JavaScript では、parseInt()、parseFloat()、Number() などの関数を使用して、文字列から数値への操作を実行できます。 。具体的な使用方法は次のとおりです。

1. parseInt() 関数

parseInt() 関数は、文字列を整数に変換できます。構文形式は次のとおりです。

parseInt(string, radix)

このうち、string は変換対象の文字列を表し、radix は基数を表します。 radix パラメータを省略した場合、デフォルトでは 10 進数形式で変換が実行されます。

以下は簡単なサンプル コードです:

var str = "123abc";
var num = parseInt(str);
console.log(num);

上記のコードの出力結果は 123 です。

2. parseFloat() 関数

parseFloat() 関数は、文字列を浮動小数点数に変換するために使用されます。その構文形式は次のとおりです。

parseFloat(string)

ここで、string は変換される文字列を表します。

以下は簡単なサンプル コードです:

var str = "3.14abc";
var num = parseFloat(str);
console.log(num);

上記のコードの出力結果は 3.14 です。

3. Number() 関数

Number() 関数は、文字列を数値型に変換するために使用されます。構文形式は次のとおりです。

Number(string)

ここで、string は変換される文字列を表します。

以下は簡単なサンプル コードです:

var str = "123.45abc";
var num = Number(str);
console.log(num);

上記のコードの出力結果は 123.45 です。

3. 実践的な演習

以下では、実践的な例を使用して、文字列を数値に変換する関数を実装する方法を示します。

HTML コード:

    
    



    请输入要转换的字符串：
    
    


    转换
    


    转换后的结果：
    

JavaScript コード分析:

1. まず、ユーザーがページ上で入力した文字列を取得する必要があります。次のコードを使用して、 get it:

var inputStr = document.getElementById("inputStr").value;

2. 次に、Number() 関数を使用して取得した文字列を数値型に変換し、次のコードを使用して結果をページに表示します。
#

var num = Number(inputStr);
document.getElementById("outputNum").innerHTML = num;

ログイン後にコピー

以上がHTML と JavaScript を使用して文字列を数値に変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。