JavaScript(基本数据类型)

149 阅读4分钟

1.js的书写方式

01.外部:通过script标签的src属性,来引入一个外部的js文件

<script src="./outer.js"></script>

02.内部:书写在script标签内的代码

 <script>
 alert('world')
 </script>

03.行内式需要了解就行

<h1 onclick="alert('hello')">hello</h1>

2.js的输入和输出

01.输入

    1. prompt()
     语法:prompt('提示信息')
    
    prompt('请输入年龄');
     2. confirm()
    语法:confirm('提示信息')
    confirm('您真的要删除')

02.输出 包括alert (内容),console.log(控制台输出),document.write(将内容添加到body里面去,如果内容中含有标签,流浪器会将标签进行解析)

    1. alert('内容')
     弹窗输出
     alert('hello world');

    2. console.log('内容')
     控制台输出
     console.log('hello world');

     3. document.write('内容');
     将内容插入到页面中(body内),如果内容中包含标签,浏览器会将其当成标签进行解析
    document.write('<h1 style="width:100px; height:100px;background:#09f;">hello world</h1>');
    小结:
        alert()
        console.log()
        document.write()

输出用户名案例: console.log(prompt('请输入用户名'));

3.基本数据类型

A.javascript的数据內型基本分为五种,

01.数值 numer

console.log(10);
console.log(10.5);
console.log(+10.5);
console.log(-10.5);

02.字符串 string

必须使用引号括起来

console.log('hello');
console.log("world");
console.log(`hello world`);

03.布尔类型 boolean

  • 仅有两个值:true(对,成立)
  • false(错,不成立)
console.log('true');
console.log(true);
console.log(false);

以后只要是仅具有两种性质的数据都可以使用布尔类型来表示

  • console.log(10 > 20); 10 > 20结果只有两种
  • console.log(10 < 20); 10 > 20 结果只有两种

显示转换

Boolean可以将其数据强制转换为布尔类型数据

        console.log(Boolean(10));     true
        console.log(Boolean(-10));      true
        console.log(Boolean('0'));      true
        console.log(Boolean(0));         false
        console.log(Boolean('a'));       true   
        console.log(Boolean(''));         false
        console.log(Boolean(' '));        true  

注意:只要有意义的都返回true

02.隐式转换

如果将一个数据作为表达式使用时,js会将数据转换为布尔类型

let a = 10;
        if(a){
            console.log('yes');
        }else{
            console.log('no');   
        }                          //yes

隐式的写出来是这样 if( numdera)) ,所以是true,输出就是yes

        let b = 0;
        if(b){
            console.log('yes');
        }else{
            console.log('no');
        }                          //no

04.undefined 未定义

console.log(undefined);

05.null 空类型

console.log(null);

06.数据类型转换

隐式转换

首先明确:

  • 只要相同的数据才可以直接进行运算,如果数据类型不相同,会发生数据类型的转换。
  • Number(数据) 可以将其他数据类型转换为number类型
  • String(数据)可以将其他数据类型转换为string类型
  • 隐式转换:JS在内部运算时,自己完成的转换。
console.log(10 * '20');         // 200
// + += 会优先进行字符串拼接
console.log(10 + '20');         // '1020'

console.log(2 - '2');           // 0

显示转换

  • 显示转换:程序员在书写代码时,发现数据类型不同,自己完成的转换

// console.log(Number('20'));
// console.log(10 * Number('20'));         // 200

console.log(String(10));
console.log(String(10) + '20');         // '1020'

console.log(2 - Number('2'));           // 0

绝大多数隐式转换都可以达到我们的目的,只要在进行+ += 运算

let inventory = 100;
let num = Number(prompt('请输入本月的入库数'));         // '20'
// let num = prompt('请输入本月的入库数') * 1;         // '20'
// let num = +prompt('请输入本月的入库数');         // '20'

// let total = inventory + Number(num);
let total = inventory + num;     //100 + 20
console.log(total);     //120

小结:

  • 如果数据类型不相同,会发生数据类型转换
  • 隐式: 绝大多数隐式转换都是正确的
  • 显示: 在进行 ++=时,如果有一个是字符串,要搞清楚是进行数学的加还是字符中的拼接。

07.数值的提取

parseInt(字符串)

在一个字符串中,从左向右依次提取整数,直到遇到第1非数字停止提取。

console.log(parseInt('10'));            // 10
console.log(parseInt('10.5元'));          // 10
console.log(parseInt('RM10元'));        // NaN       Not a Number不是一个    

parseFloat(字符串)

在一个字符串中,从左向右依次提取小数,直到遇到第1非数字停止提取。

let num = 100;
// let price = parseInt(prompt('请输入价格'));  //20.5
let price = parseFloat(prompt('请输入价格'));   //20.5

let money = num * price;    //100 * 20.5
console.log(money);    //2050

小结:

  • Number() 字符串内全都是数字 '20' '15.3'
  • parseInt()与parseFloat() 字符串后面是非数字 '20元' '15.3元'

08.模板字符串

使用``反引号定义的字符串也称之模板字符串。 模板字符中的特点: 可以换行定义字符串 可解析变量的值 ${变量名} 可以换行定义

        //可以换行定义
        let str = `hello
         world`;
         
         
        //  可解析变量的值
        let age = 28;
        let str1 = `我今年${age}岁`;
        console.log(str1);      // 我今年 18 岁

B.数据类型型检测

如果数据是你自己定义的,你清楚知道这个数据的类型

查看数据类型 typeof 语法:typeof(数据) 返回数据的类型名

console.log(typeof(10))             //类型 'number'
console.log(typeof('hello'));       //类型 'string'
console.log(typeof(true));          //类型'boolean'
console.log(typeof(undefined));     //类型'undefined'

有时数据是别人提供的, 对于prompt( ) 浏览者只要是点击了 确认 接收到的就是string类型,浏览者只要是点击了 取消 接收到的就是null类型,console.log(typeof(prompt('请输入数据'))),

C.typeof( ) 获取数据类型名。

对于confirm()

console.log(confirm('请选择'));    //true

D.特征记忆

console.log(typeof(null));           'object'  对象