JavaScript基础(第一部分 -- 简介、注释、输入输出、变量、数据类型、运算符、流程控制)(三)

简介: JavaScript基础(第一部分 -- 简介、注释、输入输出、变量、数据类型、运算符、流程控制)(三)

5.2.1.4 isNaN()

用来判断一个变量是否为非数字的类型,返回 true 或者 fals:

  • 变量为数字返回的是 false
  • 变量不是数字返回的是true
console.log(isNaN(12 - 'hello'))
    console.log(isNaN(12))

5.2.2 字符串型 String

字符串型可以是引号中的任意文本,其语法为 双引号 “” 和 单引号’ ’

因为 HTML 标签里面的属性使用的是双引号,JS 这里我们更推荐使用单引号。

JS 可以用单引号嵌套双引号 ,或者用双引号嵌套单引号 (外双内单,外单内双)。但是不能同种引号相互嵌套,如单引号内使用单引号。

var str1 = 'hello'
    console.log(str1)
    var str2 = "world"
    console.log(str2)
    var str3 = '张三说:"hello"'
    console.log(str3)
    var str4 = "张三说:'hello'"
    console.log(str4)
    // 会报错
    // JS中引号采用就近原则成对匹配
    // '张三说:' 单引号已经完成配对
    // '' 后面的单引号只能与最后的进行匹配
    // var str3 = '张三说:'hello''

5.2.2.1 字符串转义符

类似HTML里面的特殊字符,字符串中也有特殊字符,我们称之为转义符。

转义符都是 \ 开头的,常用的转义符及其说明如下:

var str = 'hello world \n hello world \\ \' \" he\tllo world\b '
    console.log(str)

5.2.2.2 字符串长度

字符串是由若干字符组成的,这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度

var str4 = "张三说:'hello'"
    console.log(str4.length)

5.2.2.3 字符串拼接

多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串

拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新的字符串

console.log('hello'+12)
    console.log(12+'hello')
    console.log('hello'+'world')
    console.log('hello'+true)
    console.log('hello'+undefined)
    console.log('hello'+null)

字符串和变量拼接,变量是不能添加引号的,因为加引号的变量会变成字符串,如果变量两侧都有字符串拼接,口诀“引引加加”

var age = 12
    console.log("张三今年" + age + "岁")

5.2.3 布尔型 Boolean

布尔类型有两个值:true 和 false ,其中 true 表示真(对),而 false 表示假(错)。

布尔型和数字型相加的时候, true 的值为 1 ,false 的值为 0。

console.log(false+12)
    console.log(true+12)

5.2.4 Undefined

一个声明后没有被赋值的变量会有一个默认值 undefined

var a
    console.log(a)
    console.log(a+1)
    console.log(a+' hello')

未定义与数相加为非数字

5.2.5 Null

一个声明变量给 null 值,里面存的值为空(即有一个盒子,但是里面没有东西)

var a = null
    console.log(a)
    // null 与数字相加 会转换为0
    console.log(a+12)
    console.log(a+' hello')
    // null 和 false 都转换为0
    console.log(a+false)

5.3 获取变量数据类型

typeof 可用来获取检测变量的数据类型

console.log(typeof 12)
    console.log(typeof 'hello')
    console.log(typeof true)
    console.log(typeof undefined)
    console.log(typeof null)

5.4 字面量

字面量是在源代码中一个固定值的表示法,字面量就是显示的值,看到啥就是啥。

在浏览器的控制台,数字显示为蓝色,字符串为黑色,null 和 undefined 为浅灰色(不同的浏览器可能会有差异)

console.log(12)
    console.log('hello')
    console.log(undefined)
    console.log(null)

5.5 数据类型转换

把一种数据类型的变量转换成另外一种数据类型

通常会实现3种方式的转换:

  • 转换为字符串类型
  • 转换为数字型
  • 转换为布尔型

5.5.1 转换为字符串

<script>
    var a = 123
    // 方式1 调用toString() 变量名.toString()
    console.log(a.toString())
    console.log( typeof a.toString())
    // 方式2 使用String()进行强制转换
    console.log(String(a))
    console.log( typeof String(a))
    // 方式3 使用 + 与字符串进行拼接
    // 拼接上长度为0的字符串
    console.log((a + ''))
    console.log( typeof (a + ''))
  </script>

三种转换方式,我们更喜欢用第三种加号拼接字符串转换方式, 这一种方式也称之为隐式转换。

5.5.2 转换为数字型

注意 parseInt 和 parseFloat 单词的大小写

var a = '123'
    var b = '3.14'
    var c = true
    var d = null
    var e = undefined
    // 转为整数
    // 小数转为整数会向下取整
    console.log( parseInt(a),parseInt(b),parseInt(c),parseInt(d),parseInt(e) )
    // console.log( parseInt(b) ) 
    // console.log( parseInt(c) ) // 转换失败 非数字
    // console.log( parseInt(d) ) // 转换失败 非数字
    // console.log( parseInt(e) ) // 转换失败 非数字
    // 转为小数
    console.log( parseFloat(a),parseFloat(b),parseFloat(c),parseFloat(d),parseFloat(e) )
    // console.log( parseFloat(b) )
    // console.log( parseFloat(c) ) // 转换失败 非数字
    // console.log( parseFloat(d) ) // 转换失败 非数字
    // console.log( parseFloat(e) ) // 转换失败 非数字
    // 强制转换
    console.log( Number(a),Number(b),Number(c),Number(d),Number(e) )
    // console.log( Number(b) )
    // console.log( Number(c) ) // true 为 1,false 为 0
    // console.log( Number(d) ) // null 为 0
    // console.log( Number(e) ) // 转换失败 非数字
    // 使用运算符号隐式转换
    // 隐式转换是我们在进行算数运算的时候,JS 自动转换了数据类型
    // 不能使用 + 与字符串进行隐式转换,会转换为字符串
    console.log( a*1, b*1, c*1, d*1, e*1 )
    // console.log( b * 1 )
    // console.log( c * 1 ) // true 为 1,false 为 0
    // console.log( d * 1 ) // null 为 0
    // console.log( e * 1 ) // 转换失败 非数字


相关文章
|
13天前
|
前端开发 JavaScript 安全
JavaScript进阶-JavaScript库与框架简介
【7月更文挑战第11天】JavaScript库和框架加速Web开发,但也带来挑战。选择适合项目、团队技能的库或框架,如React、Angular、Vue,是关键。保持依赖更新,注意性能优化,避免过度依赖。遵循最佳实践,确保安全性,如防XSS和CSRF。学习基础,结合代码示例(如React计数器组件),提升开发效率和应用质量。
|
19天前
|
资源调度 JavaScript 前端开发
JavaScript进阶 - JavaScript库与框架简介
【7月更文挑战第5天】JavaScript库和框架构成了前端开发的核心,如jQuery简化DOM操作,Angular、React和Vue提供全面解决方案。选择时要明确需求,避免过度工程化和陡峭学习曲线。使用版本管理工具确保兼容性,持续学习以适应技术变化。示例展示了jQuery和React的简单应用。正确选择和使用这些工具,能提升开发效率并创造优秀Web应用。
|
21天前
|
存储 JavaScript 前端开发
|
19天前
|
JavaScript
js【详解】typeof 运算符
js【详解】typeof 运算符
10 0
|
19天前
|
存储 JavaScript 前端开发
js【详解】数据类型原理(含变量赋值详解-浅拷贝)
js【详解】数据类型原理(含变量赋值详解-浅拷贝)
17 0
|
19天前
|
JavaScript
JS字符串数据类型转换,字符串如何转成变量,+号只要有一个是字符串,就会把另外一个转成字符串,- * / 都会把数据转成数字类型,数字型控制台是蓝色,字符型控制台是黑色,
JS字符串数据类型转换,字符串如何转成变量,+号只要有一个是字符串,就会把另外一个转成字符串,- * / 都会把数据转成数字类型,数字型控制台是蓝色,字符型控制台是黑色,
|
21天前
|
JavaScript 前端开发 数据安全/隐私保护
|
22天前
|
存储 JavaScript 前端开发
面试官:JS中变量定义时内存有什么变化?
面试官:JS中变量定义时内存有什么变化?
15 0
|
2月前
|
JavaScript 前端开发
js变量的作用域、作用域链、数据类型和转换应用案例
【4月更文挑战第27天】JavaScript 中变量有全局和局部作用域,全局变量在所有地方可访问,局部变量只限其定义的代码块。作用域链允许变量在当前块未定义时向上搜索父级作用域。语言支持多种数据类型,如字符串、数字、布尔值,可通过 `typeof` 检查类型。转换数据类型用 `parseInt` 或 `parseFloat`,将字符串转为数值。
26 1
|
2月前
|
JavaScript 前端开发
JavaScript变量、数据类型、运算符及类型转换
JavaScript变量、数据类型、运算符及类型转换
50 0