JS基础输出语句、变量与基本数据类型

芋芋芋头

已于 2024-01-12 08:54:53 修改

阅读量852

点赞数 20

文章标签： javascript 开发语言 ecmascript

于 2024-01-11 17:38:22 首次发布

本文链接：https://blog.csdn.net/m0_54034052/article/details/135531253

版权

前端三层

	语言	功能
结构层	HTML	搭建结构、放置部件、描述语义
样式层	CSS	美化网页、实现布局
行为层	JavaScript	实现交互效果、数据收发、表单验证等

1、JS书写位置

在 <body> 中的 <script> 标签中书写 JS 代码
将 JS 代码单独保存为 .js 文件，然后在 HTML 文件中使用 <script src=""></script> 引入

在body中书写JS代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 在 HTML5 之前，必须要加上 type 属性，并且里面的内容一定要正确！-->
    <!-- 
    <script type="text/javascript">
    </script> 
    -->

    <!-- 目前都是使用 HTML5，所以不用写 type 属性，默认就是 JS -->
    <!-- 推荐把 <script> 写到 body 的末尾（避免 JS 发生阻塞时页面受到牵连）-->
    <script>
        // 弹窗输出一句话
        // 每一句 JS 代码以分号结尾！
        alert('你好，JavaScript！');
    </script>
</body>

</html>

将 JS 代码单独保存为 .js 文件

将 JS 代码单独保存为 .js 文件，然后在 HTML 文件中使用 <script src=""></script> 引入

文件结构
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--
    <script src="./js/index.js"></script>
	-->
</head>

<body>
    <!-- 也可以放在 body 末尾（推荐）-->
    <script src="./js/index.js"></script>
</body>

</html>

index.js

alert('你好，JavaScript！');

2、输出语句

alert()：弹出消息框
console.log()：控制台输出

2-1 弹窗输出——alert

alert可以无对象调用，在首页，会优先于其他代码显示

alert：消息、警报

【功能】
在浏览器（JavaScript 引擎例如：Chrome V8）解析到 JS 文件中的 alert() 语句时，便会中断 JS 脚本的执行，同时弹出消息框，直到用户单击确定后，才继续执行后续的 JS 脚本。

        alert(111);
        window.alert(123);

在这里插入图片描述

2-2 控制台输出——console.log()

console：控制台
log：记录、日志

【功能】
在浏览器（JavaScript 引擎例如：Chrome V8）解析到 JS 文件中的 console.log() 语句时，会直接在浏览器控制台输出语句，并自动继续执行后续的 JS 脚本。

3、变量

定义变量可以使用： var 、 let 、 const
- var：可以控制变量提升 -----> 推荐
- let：let定义的变量必须先定义再使用
- const：const是用来定义常量 ----> 常量必须有初始值

变量提升：

当浏览器开辟出供代码执行的栈内存后，代码并没有自上而下立即执行，而是继续做了一些事情：把当前作用域中所有带var/function关键字的进行提前的声明和定义 => 变量提升机制
变量声明的提升：可以提前使用一个稍后才声明的变量，而不会引发异常
在执行所有代码前，JS 有预解析阶段，会预读所有变量的声明（不会提升赋值，只会提升定义）

        //使用var定义变量
        var m = 25 ;
        var n = 'HELLO';
        //使用变量   —— 这里直接使用输出语句，将变量在控制台打印
        console.log(a);   //25
        console.log(b);   //HELLO
        //改变变量的值
        var m = 54;
        console.log(m);  //54

3-1 变量的命名

命名规则
- 只能由 字母、数字、_、$ 组成，但不能以数字开头（建议普通代码一律以字母开头）
- 不能是关键字或保留字
- 变量名大小写敏感，a 和 A 是两个不同的变量
函数、类名、对象的属性等也都要遵守这个标识符的命名规则！

默认的命名风格
- 小驼峰命名法：mathTestScore -----> 推荐
- C 风格变量命名法：math_test_score

一个变量只定义，但没有赋初值，默认值是 undefined（未定义）
一个变量只有被 var 定义，并赋初值之后，才算正式初始化完成

4、基本数据类型

typeof

type of 用来判断数据类型

5种基本数据类型的 typeof 检测结果

类型名	typeof 检测结果	值举例
数字类型	number	`5`、`2.5`、`-0.5`
字符串类型	string	`'前端'`、`"后端"`、`'3.14'`
布尔类型	boolean	`true`、`false`
undefined 类型	undefined	`undefined`
null 类型	object（可以理解为空对象）	`null`

4-1 Number(数字)类型

整数、小数都是number类型

typeof 925; // number
typeof 0.5; // number
typeof -24; // number

支持科学计数法表示数字

3e8;			// 300000000
typeof 3e8;		// number

3e-4;			// 0.0003
typeof 3e-4;	// number

可以使用不同进制的数字
- 二进制—— b
- 八进制—— o
- 十六进制—— x

        //进制表示
        //二进制——b
        var num6 = 0b111;    //15
        console.log(num3);
        //八进制——o
        var num3 = 0o17;    //15
        console.log(num3);
        //十六进制——x
        var num4 = 0xF;    //15
        console.log(num3);

特殊的数字型值—— NaN
NaN 不是数字的数字；是一个特殊的值；不是数字，但数据类型是number

        //字符串相减(-*/)的结果就是NaN
        //0/0 = NaN
        //NaN == NaN  结果是false
        console.log(typeof(NaN));
        console.log('a'-'a');

4-2 String（字符串类型）

js中没有字符型，只有字符串型
字符串用引号包裹，双引号或者单引号均可

        //string
        //js中没有字符型，只有字符串型
        var s1 = "a";
        console.log(typeof(s1));   //string
        var s2 = 'a';
        console.log(typeof(s2));    //string
        
        //=== 全等于 值/地址都必须相等
        console.log(s1===s2);    //true

字符串拼接
- 字符串与字符串拼接
- 字符串与变量拼接
- 空字符串与变量拼接

          //字符串与字符串拼接
          console.log('HELLO' + 'World');   //HELLO World
          //字符串与变量拼接
          console.log('Lily'+20);    //Lily20
          //空字符串与变量拼接 ---> 主要目的是将数字转换为字符串
          console.log(' '+100);   //'100' 字符串的100

字符串的常用方法

方法	功能
`charAt()`	得到指定位置字符
`substring()`	提取子串（左闭右开）
`substr()`	提取子串
`slice()`	提取子串
`toUpperCase()`	将字符串变为大写
`toLowerCase()`	将字符串变为小写
`indexOf()`	检索字符串（返回查询字符的下标[不存在返回-1 ]）
`trim()`	删除首尾空格
`trimStart()`	删除首部空格
`trimEnd()`	删除尾部空格

5、数据类型的转换

5-1 其他值 —> Number

Number() 转换为数字

Number('-123.45');		 // -123.45
// 字符串中不支持有非数值字符
Number('123年');	    	// NaN
Number('2e3');			// 2000
Number('');				// 0

// 字符串不支持是数学表达式
Number('1+1');			// NaN
// 除了字符串外，还可以直接放一个表达式
Number(1+1);			// 2

Number(true);			// 1
Number(false);			// 0

Number(undefined);		// NaN
Number(null);			// 0

parseInt()将 字符串 或 浮点数 转为 整数。

//自动截掉第一个非数字字符之后的所有字符
parseInt('3.14');		  // 3
parseInt('3周吉瑞.14');	// 3
parseInt(-3.14);		  // -3

//如果字符串以非数字开头，则转为 NaN
parseInt('圆周率是3.14');	// NaN

//true、false、undefined、null 转为 NaN
parseInt(true);			// NaN
parseInt(false);		// NaN	
parseInt(undefined);	// NaN
parseInt(null);			// NaN

parseFloat()将字符串转为浮点数

parseFloat('3.14');		// 3.14

parseFloat('3.14是圆周率');		// 3.14
parseFloat('3.14.15');		   // 3.14

5-2 其他值–>字符串

String()

//传入Num类型
String(123);		// '123'
String(123.4);		// '123.4'
String(2e3);		// '2000'
Stiing(NaN);		// 'NaN'
//Infinity 无穷大   -Infinity无穷小
String(Infinity);	// 'Infinity'
//进制数，会先转换成十进制再输出
String(0xf);		// '15'

//传入布尔值或特殊值
String(true);		// 'true'
String(false);		// 'false'

String(undefined);	// 'undefined'
String(null);		// 'null'

芋芋芋头

关注

20
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
JS基础输出语句、变量与基本数据类型

语句时，便会中断 JS 脚本的执行，同时弹出消息框，直到用户单击确定后，才继续执行后续的 JS 脚本。在浏览器（JavaScript 引擎例如：Chrome V8）解析到 JS 文件中的。在浏览器（JavaScript 引擎例如：Chrome V8）解析到 JS 文件中的。语句时，会直接在浏览器控制台输出语句，并自动继续执行后续的 JS 脚本。将 JS 代码单独保存为 .js 文件，然后在 HTML 文件中使用。type of 用来判断数据类型。'你好，JavaScript！// 弹窗输出一句话。
复制链接

扫一扫