ホームページ > 記事 > ウェブフロントエンド > JavaScript トピック 7: 型変換
#目次
(無料学習の推奨事項: JavaScript ビデオ チュートリアル)
##序文型変換を理解する前に、J の基本的な型についてまだ疑問がある場合は、次のことを検討してください。 JavaScript の基本的なデータ型については、この記事を参照してください~
型変換は批判されることがよくありますが、実際には多くの場合に非常に役立ちます。一部の強制的な型変換では、型変換が発生した場所が明確にわかります。 . コードの可読性と保守性の向上に役立ちます。ただし、それらの一部は目に見えない場所で発生するため、今日は一般的な型変換操作と操作について説明します~
1. 型変換とは何ですか?変数の型は、変数に格納される値の型によって決定されることは誰もが知っているため、値をある型から別の型に変換することは、通常、型キャストと呼ばれます。また、分割することもできます。特定の特性に従って 2 つのカテゴリに分類されます。
明示的な型変換明示的な型変換とは、主に、対応する文字列、数値、ブール値を、文字列、数値、ブール値、およびその他の構築メソッド値を通じて変換することを指します
const str = String(1);const num = Number("123.3"); //number:123.3
これは明示的なケースです。型変換アクションは私たちによって開始されます。
1.2 暗黙的な型変換
const newStr1 = 1 + "str"; // '1str'const newStr2 = "hello" + [89, 150.156, "mike"]; // 'hello89,150.156,mike'
暗黙的な型変換は常に存在するため、それを受け入れ、その利点と欠点を理解する必要があります。
2. 変換の基本ルール一部のデータ型間の変換は「複数のプロセス」を経ます。最初にいくつかの「プロセス」を紹介します~
2.1 元の値を文字列に変換する
を呼び出します。ToString
は、対応する結果テーブルも提供します。テーブルは次のとおりです。 ルール:
パラメータの種類
Null | |
Boolean | |
#Number | NaN や Infinity など、多数の結果があります。 |
String | |
に等しい値を返します例: |
数学的な演算など、数値以外の値を数値として使用する必要がある場合があります。このため、ES5 仕様では、セクション 9.3 で抽象操作 ToNumber
を定義しています。ToString と同様に、特定の変換ルールもあります:パラメータ タイプ
true | ||||||||
---|---|---|---|---|---|---|---|---|
false | 0 | |||||||
未定義 | NaN | |||||||
null | 0 | |||||||
String | 等しい値を返しますが、処理が失敗した場合は NaN を返します | |||||||
参数类型 | 结果 |
---|---|
Object | 1. primValue = ToPrimitive(input, String) 2. 返回 ToString(primValue) |
所谓的 ToPrimitive 方法,其实就是输入一个值,然后返回一个一定是基本类型的值。
我们总结一下,当我们用 String 方法转化一个值的时候:
ToPrimitive
方法,将其转为基本类型,然后再参照 “原始值转字符” 的对应表进行转换。其实,从对象到数字的转换也是一样:
参数类型 | 结果 |
---|---|
Object | 1. primValue = ToPrimitive(input, Number) 2. 返回 ToNumber(primValue) |
注意:转字符和数字的时候处理略有不同~
那接下来就要看看 ToPrimitive 了,ES5 规范 9.1
这个返回原始值的方法接受一个输入参数 和一个可选的参数来表示转换类型:
所以总结下,对象转字符串(就是 Number() 函数)可以概括为:
举个例子:
console.log(Number({})); // NaNconsole.log(Number({ a: 1 })); // NaNconsole.log(Number([])); // 0console.log(Number([0])); // 0console.log(Number([1, 2, 3])); // NaNconsole.log( Number(function() { var a = 1; })); // NaNconsole.log(Number(/\d+/g)); // NaNconsole.log(Number(new Date(2010, 0, 1))); // 1262275200000console.log(Number(new Error("a"))); // NaN
注意:
转换对象时,你会发现它变成了 NaN,所以
在这个例子中,[]
和[0]
都返回了 0
Number([])
的时候,先调用 []
的 valueOf
方法,此时返回 []
;toString
方法;ToNumber
这个规范上的方法;Number([].valueOf().toString())
,结果为 0;[1, 2, 3]
却返回了一个 NaN:
Number([])
的时候,先调用 [1,2,3]
的 valueOf
方法,此时返回 [1,2,3];toString
方法;1,2,3
,接下来调用 ToNumber 这个规范上的方法;Number([1,2,3].valueOf().toString())
,结果为 NaN;四、涉及到类型转换的运算符
读到这里我们对类型转换有了一定的概念,现在我们再来看看在运算中常见的类型转换问题。
+a
运算符显式地将后面的变量 a 保存的数据转换为数字,不是字符串拼接。
查看 ES5 规范 11.4.6,会调用 ToNumber 处理该值,相当于 Number(‘1’),最终结果返回数字 1。
const a = "1.1";const b = 5 + +a;console.log(b); // 6.6
上面的代码应该是我们经常用到的,当我们知道一个字段是字符串但希望它是数字时,一般会这么做~
我们一起验证下下面这些类型
console.log(+[]); // 0console.log(+["1"]); // 1console.log(+["1", "2", "3"]); // NaNconsole.log(+{}); // NaN
既然是调用 ToNumber 方法我们在之前的小节中提到过
valueOf
方法,如果返回一个原始值,则 JavaScript 将其返回。toString
方法,如果返回一个原始值,则 JavaScript 将其返回。+[]
为例,[]
调用 valueOf
方法,返回一个空数组,因为不是原始值,调用 toString
方法,返回 ""
。ToNumber
方法,""
对应的返回值是 0,所以最终返回 0。一元运算符!
显式地将值强制类型转换为布尔值。但是它同时还将真值反转为假值(或者将假值反转为真值)。
const a = 1;const b = "str";const c = [1, 2, 3];console.log(!a); // falseconsole.log(!b); // falseconsole.log(!c); // falseconsole.log(!0); // trueconsole.log(!""); // trueconsole.log(![]); //falseconsole.log(![]); //falseconsole.log(!undefined); // trueconsole.log(!null); // true
同样的 !!
会讲其他类型转成对应的 bool 值
!和 + 运算符是我们最常用的两种显式类型转换运算符,之后我们再看看那些不经意间就被转换类型的操作~
五、常见的类型转换操作
const num = 1;const str = "200";console.log(num + str); // '1200'
这段代码大家应该都知道结果,但是其中的原理是否和大家想的一样呢?
const arr1 = [1, 2];const arr2 = [3, 4];console.log(arr1 + arr2); // 1,23,4
两个数组的结果为什么也是个字符串?
原因
ES5 规范 11.6.1 中提到,如果某个操作数是字符串或者能通过以下步骤转换为字符串,+将进行拼接操作
如果其中的一个操作数是引用类型,则首先对其进行ToPrimitive
操作(第三小节有提)
总结
简单来说就是,如果+
的其中一个操作数是字符串(或者通过以上步骤可以得到字符串),则执行字符串拼接;否则执行数字加法。
现在我们来看看到布尔值的隐式强制类型转换,它最为常见也最容易搞错。相对布尔值,数字和字符串操作中的隐式强制类型转换还算比较明显。
下面的情况会发生布尔值隐式强制类型转换。
true
时执行操作;true
;? :
;谈到类型转换,一定绕不开 ==
和 ===
。
==
用于比较两个值是否相等,当要比较的两个值类型不一样的时候,就会发生类型的转换。
在ES5 规范 11.9.5 中简述了它的规则:
当执行 x == y 时:
相关免费学习推荐:javascript(视频)
以上がJavaScript トピック 7: 型変換の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。