JavaScript

JavaScript学习总结(四)

xiaozheng · 1月7日 · 2022年

自去年6月份放假以后,一直没有再接触JavaScript,忙着考研初试、复试、打寒假工、写毕业设计,一直不停地搁置了,研究生生活也过了一个学期了,又开始把JavaScript捡起来,希望能有所长进吧。

今天从JavaScript的类型转换开始学习!

类型转换,指的是将“一种数据类型”转换为“另外一种数据类型”。在JavaScript中,共有2种类型转换。

  • (1)隐式类型转换
  • (2)显式类型转换

隐式类型转换,指的是JavaScript自动进行的类型转换。显式类型转换,指的是需要我们手动用代码强制进行的类型转换。这两种方式,我们从名字上就能区分开来

一、“字符串”转换为“数字”

在JavaScript中,想要将字符串转换为数字,可以有2种方式。

  • (1)Number()
  • (2)parseInt()和parseFloat()

Number()方法可以将任何“数字型字符串”转换为数字。那什么是数字型字符串呢?像"123"、“3.ghgfhjfwenzhanglaixzizhenggegedboke@@@@1415”,这些只有数字的字符串就是数字型字符串,而"hao123"、"100px"等就不是。

准确来说,parseInt()和parseFloat是提取“首字母为数字的任意字符串”中的数字,其中,parseInt()提取的是整数部ghgfhjfwenzhanglaixzizhenggegedboke@@@@分,parseFloat()不仅会提取整数部分,还会提取小数部分。

举例:

<!DOCTYPE html> 
<html>
<head>
   <meta charset="utf-8" />
   <title></title>
   <script>
       document.write("Number('123'):" + Number("123") + "<br/>");
       document.write("Number('3.1415'):" + Number("3.1415") + "<br/>");
       document.write("Number('hao123'):" + Number("hao123") + "<br/>");
       document.write("Number('100px'):" + Number("100px"));
   </script>
</head>
<body>
</body>
</html>

浏览器预览效果如图所示:

分析:

NaN指的是“Not a Number(非数字)”,从中可以看出,Number()方法只能将纯“数字型字符串”转换为数字,不能将其他字符串(即使字符串内有数字字符)转换为数字。在实际开发中,很多时候我们需要提取类似"100px"中的数字,要怎么做呢?这个时候就应该使用parseInt()和parseFloat(),而不是Number()了。

<!DOCTYPE html> 
<html>
<head>
   <meta charset="utf-8" />
   <title></title>
   <script>
       document.write("parseInt('123'):" + parseInt("123") + "<br/>");
       document.write("parseInt('3.1415'):" + parseInt("3.1415") + "<br/>");
       document.write("parseInt('hao123'):" + parseInt("hao123") + "<br/>");
       document.write("parseInt('100px'):" + parseInt("100px")+ "<br/>");
       document.write("parseInt('+123'):" + parseInt("+123") + "<br/>");
       document.write("parseInt('-123'):" + parseInt("-123"));
   </script>
</head>
<body>
</body>
</html>

parseInt()会从左到右进行判断,如果第1个字符是数字,则继续判断,直到出现非数字为止(小数点也是非数字);如果第1个字符是非数字,则直接返回NaN。但是第1个字符是加号(+)或减号(-),也就是非数字,parseInt()同样也是可以转换的。因为加号和减号在数学上其实就是表示一个数的正和负,所以parseInt()可以接受第1个字符是加号或减号。同样的,parseFloat()也有这个特点。

分析:

parseFloat()跟parseInt()非常类似,都是从第1个字符从左到右开始判断。如果第1个字符是数字,则继续判断,直到出现除了数字和小数点之外的字符为止;如果第1个字符是非数字,则直接返回NaN。在“首字母是+、-或数字的字符串”中,不管是整数部分,还是小数部分,parseFloat()同样可以转换,这一点跟parseInt()是不一样的ghgfhjfwenzhanglaixzizhenggegedboke@@@@

二、“数字”转换为“字符串”

在JavaScript中,想要将数字转换为字符串,也有2种方式。

  • (1)与空字符串相加
  • (2)toString()

举例:

<!DOCTYPE html> 
<html>
<head>
   <meta charset="utf-8" />
   <title></title>
   <script>
       var a = 2018;
       var b = 2018 + "";
       var c = a + 1000;
       document.write(c+"\<br>");
       var d = a.toString() + 1000;
       document.write(d);
   </script>
</head>
<body>
</body>
</html>

分析:

数字加上字符串,系统会将数字转换成字符串。如果想要将一个数字转换为字符串,而又不增加多余的字符,我们可以将这个数字加上一个空字符串。

a.toString()表示将a转换为字符串,也就是2018转换为"2018",因此最终b的值为"20181000"。

在实际开发中,如果想要将数字转换为字符串来用,我们很少使用toString()方法,而更多使用隐式类型转换的方式(也就是直接跟一个字符串相加)就行了。

三、转义字符

所谓的转义字符,指的是在默认情况下某些字符在浏览器是无法显示的,不过为了能够让这些字符能够显示出来,我们可以使用这些字符对应的转义字符来代替。在JavaScript中,常见的转义字符如表所示。

实际上,JavaScript中的转义字符很多,但是我们只需要记住上面3种就可以了。此外还需要特别说明一下,对于字符串的换行,有以下2种情况。

  • (1)如果是在document.write()中换行,则应该用:<ghgfhjfwenzhanglaixzizhenggegedboke@@@@br/>
  • (2)如果是在alert()中换行,则应该用:\n

\n是转义字符,一般用于对话框文本的换行。这里如果用<br/>就无法实现了,而document.write()是在网页上添加内容,相当于HTML的一种语句,使用<br/>就可以实ghgfhjfwenzhanglaixzizhenggegedboke@@@@现换行