Heim >Web-Frontend >js-Tutorial >JavaScript-Thema 7: Typkonvertierung
Inhaltsverzeichnis
Javascript-Video-Tutorial) Vorwort
Wenn Sie vor dem Verständnis der Typkonvertierung immer noch Zweifel an den Grundtypen von Js haben, können Sie sich auch die Grunddatentypen ansehen in JavaScript. Dies ist ein Artikel~Typkonvertierungen werden oft kritisiert, aber tatsächlich sind sie in vielen Fällen sehr nützlich. Einige erzwungene Typkonvertierungen können uns klar sagen, wo Typkonvertierungen stattgefunden haben, was dazu beiträgt, die Lesbarkeit und Wartbarkeit des Codes zu verbessern. Einige davon passieren jedoch an Orten, die wir nicht sehen können. Deshalb werden wir heute gängige Typkonvertierungsoperationen und -operationen besprechen. ~
1. Was ist Typkonvertierung?Wir alle wissen, dass der Typ einer Variablen durch den Typ des darin gespeicherten Werts bestimmt wird. Daher wird die Konvertierung eines Werts von einem Typ in einen anderen normalerweise als Typumwandlung bezeichnet und kann auch anhand bestimmter Funktionen unterteilt werden zwei Kategorien
Explizite Typkonvertierung Implizite Typkonvertierung.Die explizite Typkonvertierung bezieht sich hauptsächlich auf die Konvertierung entsprechender Zeichenfolgen, Zahlen, boolescher Werte durch String, Number, Boolean und andere Konstruktionsmethoden. const str = String(1);const num = Number("123.3"); //number:123.3
Dies ist der explizite Fall - Typ Der Konvertierungsvorgang wird von uns initiiert.
1.2 Implizite Typkonvertierung
const newStr1 = 1 + "str"; // '1str'const newStr2 = "hello" + [89, 150.156, "mike"]; // 'hello89,150.156,mike'
Wenn Schüler, die in C++, Java und anderen stark typisierten Sprachen arbeiten, ähnliche Kombinationen schreiben, sollten sie einen Fehler melden, jedoch nicht in Js.
2. Grundregeln der Konvertierung
Die Konvertierung zwischen einigen Datentypen erfolgt durch „mehrere Prozesse“. Wir versuchen, zuerst diejenigen mit weniger „Prozessen“ einzuführen ~ 2.1 Originalwert in String konvertieren
Wir verwenden die String-Funktion, um den Typ in einen String-Typ umzuwandeln. Wenn die Funktion String
keine Parameter übergibt, gibt sie einen leeren String zurück. Wenn Parameter vorhanden sind, rufen Sie ToString(value) auf.
und ToString
stellen auch eine entsprechende Ergebnistabelle bereit. Die Tabelle sieht wie folgt aus:
String
函数不传参数,返回空字符串,如果有参数,调用 ToString(value)
,而 ToString
也给了一个对应的结果表。表如下:
规则:
参数类型 | 返回 |
---|---|
Undefined | “undefined” |
Null | “null” |
Boolean | 如果参数是 true,返回 “true”。参数为 false,返回 “false” |
Number | 结果有很多种,例如 NaN 和 Infinity |
String | 返回与之相等的值 |
举例:
console.log(String()); // 空字符串console.log(String(undefined)); // undefinedconsole.log(String(null)); // nullconsole.log(String(false)); // falseconsole.log(String(true)); // true// Numberconsole.log(String(0)); // 0console.log(String(-0)); // 0console.log(String(NaN)); // NaNconsole.log(String(Infinity)); // Infinityconsole.log(String(-Infinity)); // -Infinityconsole.log(String(1)); // 1
有时我们需要将非数字值当作数字来使用,比如数学运算。为此 ES5 规范在 9.3 节定义了抽象操作ToNumber
Rückgabe | |
---|---|
„undefiniert“ | |
„null“ | |
Wenn der Parameter wahr ist, wird „wahr“ zurückgegeben. Wenn der Parameter falsch ist, geben Sie „false“ zurück. | |
Es gibt viele Ergebnisse, z. B. NaN und Infinity | 2. 2 Originalwert in Zahl umwandeln |
Parametertyp |
console.log(Number(true)); // 1console.log(Number(false)); // 0console.log(Number(undefined)); // NaNconsole.log(Number("余光")); // NaNconsole.log(Number("1")); // 1
我们使用 Boolean 函数
将类型转换成布尔类型,在 JavaScript 中,只有 6 种 值可以被转换成false
,其他都会被转换成true
。
console.log(Boolean()); // falseconsole.log(Boolean(false)); // falseconsole.log(Boolean(undefined)); // falseconsole.log(Boolean(null)); // falseconsole.log(Boolean(+0)); // falseconsole.log(Boolean(-0)); // falseconsole.log(Boolean(NaN)); // falseconsole.log(Boolean("")); // false
原始值到对象的转换非常简单,原始值通过调用 String()、Number() 或者 Boolean() 构造函数,转换为它们各自的包装对象。
null
和 undefined
属于例外,当将它们用在期望是一个对象的地方都会造成一个类型错误 (TypeError) 异常,而不会执行正常的转换。
var a = 1;console.log(typeof a); // numbervar b = new Number(a);console.log(typeof b); // object
三、对象转字符串和数字
3.0 这一小节是我认为值得一提,但篇幅较少的一点:
对象到布尔值的转换非常简单:所有对象(包括数组和函数)都转换为 true
。对于包装对象也是这样,举个例子:
console.log(Boolean(new Boolean(false))); // true
这是一个不太常见的操作,或者说现象,但我们也不能忽略它。
转换都是通过调用待转换对象的一个方法来完成的,在 Js 中,一般待转换对象拥有两个方法:
toString
所有的对象除了null
和undefined
之外的任何值都具有toString
方法,通常情况下,它和使用String
方法返回的结果一致。
在JavaSciprt 专题之类型检测中我们提到过Object.prototype.toString
方法会根据这个对象的[[class]]内部属性,返回由 "[object " 和 class 和 “]” 三个部分组成的字符串。举个例子:
const obj = { name: "余光" };obj.toString(); // "[object Object]"obj.toString === Object.prototype.toString; // true
我们已经验证了 => 对象调用 toString 方法是调用其构造函数原型上的方法
其他数据类型的 toString 方法也都有自己的特点:
[1, 2, 3, 4].toString(); // "1,2,3,4"[].toString(); // ""function func() { console.log();}func.toString(); // "function func () { console.log() }"
valueOf
valueOf 方法返回这个对象本身,数组、函数、正则简单的继承了这个默认方法,也会返回对象本身。日期是一个例外,它会返回它的一个内容表示: 1970 年 1 月 1 日以来的毫秒数。
var date = new Date(2017, 4, 21);console.log(date.valueOf()); // 1495296000000
在我们知道了 toString()和 valueOf()这两个方法后,来看看转换的规则,即什么时候用:ES5 规范 9.8
参数类型 | 结果 |
---|---|
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(视频)
Das obige ist der detaillierte Inhalt vonJavaScript-Thema 7: Typkonvertierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!