ホームページ ウェブフロントエンド フロントエンドQ&A JavaScriptの型変換(詳しい説明と例)

JavaScriptの型変換(詳しい説明と例)

Jan 12, 2022 pm 06:05 PM
html javascript フロントエンド

この記事では、JavaScript の型変換に関する知識を提供します。値をプリミティブ値に変換、数値に変換、文字列に変換することは、エンジン内の 3 つの抽象操作に対応します: ToPrimitive() 、 ToNumber() 、 ToString() , 皆様のお役に立てれば幸いです。

JavaScriptの型変換(詳しい説明と例)

#JavaScript の加算ルール

JavaScript では、加算のルールは実際には非常に単純です。状況は 2 つだけ:

  • 数字を数字に追加する

  • 文字列を文字列に追加する

その他すべて値のタイプは、これら 2 つのタイプの値に自動的に変換されます。

JavaScript には、2 つのタイプの値があります:

  • 元の値は次のとおりです。未定義、null、ブール、数値、文字列、シンボル

  • オブジェクト値: 他のすべての値は、配列 (配列) や関数を含むオブジェクト型の値です

型変換

加算演算子は、次の 3 つの型変換をトリガーします。値を、対応するプリミティブ値、数値、文字列に変換します。 JavaScript エンジン内の 3 つの抽象操作: ToPrimitive()、ToNumber()、ToString()

ToPrimitive() を通じて値を元の値に変換します。

ToPrimitive(input, PreferredType?)
ログイン後にコピー

オプションのパラメータ PreferredType は、変換設定を表すだけの Number または String にすることができ、変換結果は必ずしもこのパラメータが指す型である必要はありませんが、変換結果はプリミティブである必要がありますPreferredType が Number としてマークされている場合、入力値を変換するために次の操作が実行されます (§9.1):

    #入力値がすでにプリミティブ値である場合は、それを返します
  • それ以外の場合、入力値がオブジェクトの場合は、オブジェクトの valueOf() メソッドを呼び出します。valueOf() メソッドの戻り値がプリミティブ値の場合は、このプリミティブを返します。
  • それ以外の場合は、このオブジェクトの toString() メソッドを呼び出します。toString() メソッドの戻り値がプリミティブ値の場合は、元の値が返されます。
  • それ以外の場合は、TypeError 例外がスローされます。
  • PreferredType が String としてマークされている場合、変換操作 2 番目と 3 番目のステップの順序は次のようになります。 PreferredType パラメータがない場合、PreferredType の値は次の規則に従って自動的に設定されます: 日付型オブジェクトは String に設定され、その他の型の値は Number に設定されます。
##ToNumber() を通じて値を数値に変換します。

入力値が object の場合、ToPrimitive( obj, Number) が最初に呼び出されてオブジェクトをプリミティブ値に変換し、次に ToNumber() が呼び出されてプリミティブ値を数値に変換します。値を文字列に変換します

JavaScriptの型変換(詳しい説明と例)

#入力値がオブジェクトの場合、最初に ToPrimitive(obj, String) が呼び出され、オブジェクトが次のように変換されます。元の値を取得し、ToString() を呼び出して元の値を文字列に変換します。 function (コンストラクターとしてではなく) 呼び出される場合、ToNumber() オペレーションはエンジン内で内部的に呼び出されます。

var obj = {
    valueOf: function () {
        console.log("valueOf");
        return {}; // 没有返回原始值
    },
    toString: function () {
        console.log("toString");
        return {}; // 没有返回原始值
    }
}
ログイン後にコピー
Addition

JavaScriptの型変換(詳しい説明と例)

Number(obj)
// output
valueOf
toString
Uncaught TypeError: Cannot convert object to primitive value
String(obj)
// output
toString
valueOf
Uncaught TypeError: Cannot convert object to primitive value
ログイン後にコピー

計算中 この式を表現するときの操作手順は次のとおりです。

2 つのオペランドを元の値に変換します (以下は数学的表記法であり、JavaScript コードではありません):

    value1 + value2
ログイン後にコピー

PreferredType は省略されているため、Date 型の値は String を使用し、他の型の値は Number を使用します。

If prim1 またはprim2 が文字列である場合、もう一方を文字列に変換し、2 つの文字列連結演算の結果を返します;

それ以外の場合は、prim1 と prim2 の両方を数値型に変換し、それらの合計を返します。

  • [] []

出力: ''
  • [] は次のように変換されます。プリミティブ値の場合は、まず valueOf() メソッドを試し、配列自体を返します (これ):

        prim1 := ToPrimitive(value1)
        prim2 := ToPrimitive(value2)
    ログイン後にコピー

    このような結果はプリミティブ値ではないため、もう一度 toString() メソッドを呼び出して空の文字列を返します。 (これはプリミティブ値です)。したがって、[] [] の結果は、実際には 2 つの空の文字列を連結したものになります。
  • > var arr = [];
    > arr.valueOf() === arr
    true
    ログイン後にコピー
  • {} {}

出力: NaN

JavaScript エンジンは、最初の {} を空のコード ブロックとして解釈し、無視します。

ここでのプラス記号は、ではありません。加算を表す二項演算子ですが、その後のオペランドを数値に変換する単項演算子であり、Number() 関数とまったく同じです。例えば:###
+{}
Number({})
Number({}.toString())  // 因为{}.valueOf()不是原始值
Number("[object Object]")
NaN
ログイン後にコピー
> {} + []
0
ログイン後にコピー
  • {} 忽略

  • +[] = Number([]) = Number([].toString()) = Number("") = 0

有趣的是,Node.js的REPL在解析类似的输入时,与Firefox和Chrome(和Node.js一样使用V8引擎)的解析结果不同.下面的输入会被解析成一个表达式,结果更符合我们的预料:

> {} + {}
'[object Object][object Object]'
> {} + []
'[object Object]'
ログイン後にコピー

总结

对象.valueOf() === 对象

数组对象.toString() === 数组对象.join()

对象.toString() === "[object Object]"

Javacript 中 + 号工作:

  • 数字 + 数字

  • 字符串 + 字符串

【相关推荐:javascript学习教程

以上がJavaScriptの型変換(詳しい説明と例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

See all articles