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 ) // 转换失败 非数字


相关文章
|
4天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
4天前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
4天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
20天前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
41 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
16天前
|
JavaScript 前端开发
局部 JavaScript 变量
JavaScript 中,函数内部使用 `var` 声明的变量为局部变量,仅在函数内可见,函数执行完毕后被删除。全局变量则在函数外部声明,整个页面的脚本和函数均可访问,页面关闭后才被删除。未声明的变量赋值会自动成为 `window` 对象的属性,且在非严格模式下可被删除。
|
21天前
|
存储 JavaScript 前端开发
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
15 0
|
1月前
|
JavaScript 前端开发
什么是JavaScript变量?
什么是JavaScript变量?
32 0
|
6月前
|
JavaScript 前端开发
js变量的作用域、作用域链、数据类型和转换应用案例
【4月更文挑战第27天】JavaScript 中变量有全局和局部作用域,全局变量在所有地方可访问,局部变量只限其定义的代码块。作用域链允许变量在当前块未定义时向上搜索父级作用域。语言支持多种数据类型,如字符串、数字、布尔值,可通过 `typeof` 检查类型。转换数据类型用 `parseInt` 或 `parseFloat`,将字符串转为数值。
40 1
|
6月前
|
JavaScript 前端开发
JavaScript变量、数据类型、运算符及类型转换
JavaScript变量、数据类型、运算符及类型转换
65 0
|
JavaScript 前端开发
JavaScript 语法:变量、数据类型及数据类型转换
JavaScript 语法 之 变量、数据类型及数据类型转换
58 0
JavaScript 语法:变量、数据类型及数据类型转换