当前位置：首页 > news >正文

JavaScript基础：js介绍、变量、数据类型以及类型转换

news 2025/7/7 4:50:19

介绍

引入方式

内部方式

外部形式

注释和结束符

单行注释

多行注释

结束符

输入和输出

输出

输入

变量

声明

赋值

关键字

变量名命名规则

常量

数据类型

数值类型

字符串类型

布尔类型

undefined

类型转换

隐式转换

显式转换

Number

✨介绍

📖引入方式

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签(<script> js代码<script>)将 JavaScript 代码引入到 HTML 中，有两种方式：

💡内部方式

通过 script 标签包裹 JavaScript 代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 引入方式</title>
</head>
<body><!-- 内联形式：通过 script 标签包裹 JavaScript 代码 --><script>alert('js基础介绍')</script>
</body>
</html>

💡外部形式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入

//demo.js
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 引入方式</title>
</head>
<body><!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 --><script src="demo.js"></script>
</body>
</html>

如果 script 标签使用 src 属性引入了某 .js 文件，那么标签的代码会被忽略！！！如下代码所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 引入方式</title>
</head>
<body><!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 --><script src="demo.js">// 此处的代码会被忽略掉！！！！alert('会被忽略');  </script>
</body>
</html>

📖注释和结束符

通过注释可以屏蔽代码被执行或者添加备注信息，JavaScript 支持两种形式注释语法：

💡单行注释

使用 // 注释单行代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 注释</title>
</head>
<body><script>// 这种是单行注释的语法// 一次只能注释一行// 可以重复注释document.write('前面是注释');</script>
</body>
</html>

💡多行注释

使用 /* */ 注释多行代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 注释</title>
</head>
<body><script>/* 这种的是多行注释的语法 *//*更常见的多行注释是这种写法在些可以任意换行多少行都可以*/document.write('多行注释')</script>
</body>
</html>

注：编辑器中单行注释的快捷键为 ctrl + /

📖结束符

在 JavaScript 中 ; 代表一段代码的结束，多数情况下可以省略 ; 使用回车（enter）替代。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 结束符</title>
</head>
<body><script> alert(1);//结束符alert(2);alert(1)//无结束符alert(2)</script>
</body>
</html>

📖输入和输出

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

举例说明：如按键盘上的方向键，向上/下键可以滚动页面，按向上/下键这个动作叫作输入，页面发生了滚动了这便叫输出。

💡输出

JavaScript 可以接收用户的输入，然后再将输入的结果输出：

alert()、document.wirte()

以数字为例，向 alert() 或 document.write()输入任意数字，他都会以弹窗形式展示（输出）给用户。

💡输入

向 prompt() 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 输入输出</title>
</head>
<body><script> // 1. 输入的任意数字，都会以弹窗形式展示document.write('要输出的内容')alert('要输出的内容');
// 2. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号prompt('请输入您的姓名:')</script>
</body>
</html>

✨变量

变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆，通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】（数据）(其实跟别的语言的变量差不多)

<script>// x 符号代表了 5 这个数值x = 5// y 符号代表了 6 这个数值y = 6//举例： 在 JavaScript 中使用变量可以将某个数据（数值）记录下来！
// 将用户输入的内容保存在 num 这个变量（容器）中num = prompt('请输入一数字!')
// 通过 num 变量（容器）将用户输入的内容输出出来alert(num)document.write(num)
</script>

📖声明

声明(定义)变量有两部分构成：声明关键字、变量名（标识）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 声明和赋值</title>
</head>
<body><script> // let 变量名// 声明(定义)变量有两部分构成：声明关键字、变量名（标识）// let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语// age 即变量的名称，也叫标识符let age</script>
</body>
</html>

let 和 var 都是 JavaScript 中的声明变量的关键字，推荐使用 let 声明变量！！！

📖赋值

声明（定义）变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 声明和赋值</title>
</head>
<body><script> // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）// let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语// age 即变量的名称，也叫标识符let age// 赋值，将 18 这个数据存入了 age 这个“容器”中age = 18// 这样 age 的值就成了 18document.write(age)// 也可以声明和赋值同时进行let str = 'hello world!'alert(str);</script>
</body>
</html>

📖关键字

JavaScript 使用专门的关键字 let 和 var 来声明（定义）变量，在使用时需要注意一些细节：

💡以下是使用 let 时的注意事项：

允许声明和赋值同时进行

不允许重复声明

允许同时声明多个变量并赋值

JavaScript 中内置的一些关键字不能被当做变量名

💡以下是使用 var 时的注意事项：

允许声明和赋值同时进行

允许重复声明

允许同时声明多个变量并赋值

大部分情况使用 let 和 var 区别不大，但是 let 相较 var 更严谨，因此推荐使用 let.

📖变量名命名规则

关于变量的名称（标识符）有一系列的规则需要遵守：

只能是字母、数字、下划线、$，且不能能数字开头

字母区分大小写，如 Age 和 age 是不同的变量

JavaScript 内部已占用于单词（关键字或保留字）不允许使用

尽量保证变量具有一定的语义，见字知义

注：所谓关键字是指 JavaScript 内部使用的词语，如 let 和var，保留字是指 JavaScript 内部目前没有使用的词语，但是将来可能会使用词语。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 变量名命名规则</title>
</head>
<body><script> let age = 18 // 正确let age1 = 18 // 正确let _age = 18 // 正确
// let 1age = 18; // 错误，不可以数字开头let $age = 18 // 正确let Age = 24 // 正确，它与小写的 age 是不同的变量// let let = 18; // 错误，let 是关键字let int = 123 // 不推荐，int 是保留字</script>
</body>
</html>

📖常量

概念：使用 const 声明的变量称为“常量”。

使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。

命名规范：和变量一致

const PI = 3.14

注意：常量不允许重新赋值,声明的时候必须赋值（初始化）。

✨数据类型

计算机程序可以处理大量的数据，为了方便数据的管理，将数据分成了不同的类型：

注：通过 typeof 关键字检测数据类型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> // 检测 1 是什么类型数据，结果为 numberdocument.write(typeof 1)</script>
</body>
</html>

📖数值类型

数值类型就是我们数学中学习到的数字，可以是整数、小数、正数、负数。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> let score = 100 // 正整数let price = 12.345 // 小数let temperature = -40 // 负数
document.write(typeof score) // 结果为 numberdocument.write(typeof price) // 结果为 numberdocument.write(typeof temperature) // 结果为 number</script>
</body>
</html>

JavaScript 中的数值类型与数学中的数字是一样的，分为正数、负数、小数等。

📖字符串类型

通过单引号（ ''）、双引号（ ""）或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

注意事项：

无论单引号或是双引号必须成对使用

单引号/双引号可以互相嵌套，但是不以自已嵌套自已

必要时可以使用转义符 \，输出单引号或双引号

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> let user_name = '小明' // 使用单引号let gender = "男" // 使用双引号let str = '123' // 看上去是数字，但是用引号包裹了就成了字符串了let str1 = '' // 这种情况叫空字符串documeent.write(typeof user_name) // 结果为 stringdocumeent.write(typeof gender) // 结果为 stringdocumeent.write(typeof str) // 结果为 string</script>
</body>
</html>

📖布尔类型

表示真或者假时在计算机中对应的是布尔类型数据，它有两个固定的值 true 和 false，表示肯定的数据用 true，表示否定的数据用 false。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> //  pink老师帅不帅？回答 是 或 否let isCool = true // 是的，摔死了！isCool = false // 不，套马杆的汉子！
document.write(typeof isCool) // 结果为 boolean</script>
</body>
</html>

📖undefined

未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> // 只声明了变量，并末赋值let tmp;document.write(typeof tmp) // 结果为 undefined</script>
</body>
</html>

注：JavaScript 中变量的值决定了变量的数据类型。

✨类型转换

在 JavaScript 中数据被分成了不同的类型，如数值、字符串、布尔值、undefined，在实际编程的过程中，不同数据类型之间存在着转换的关系。

📖隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 隐式转换</title>
</head>
<body><script> let num = 13 // 数值let num2 = '2' // 字符串
// 结果为 132// 原因是将数值 num 转换成了字符串，相当于 '13'// 然后 + 将两个字符串拼接到了一起console.log(num + num2)
// 结果为 11// 原因是将字符串 num2 转换成了数值，相当于 2// 然后数值 13 减去 数值 2console.log(num - num2)
let a = prompt('请输入一个数字')let b = prompt('请再输入一个数字')
alert(a + b);</script>
</body>
</html>

✨显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

📖Number

通过 Number 显示转换成数值类型，当转换失败时结果为 NaN（Not a Number）即不是一个数字。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 隐式转换</title>
</head>
<body><script>let t = '12'let f = 8
// 显式将字符串 12 转换成数值 12t = Number(t)
// 检测转换后的类型// console.log(typeof t);console.log(t + f) // 结果为 20
// 并不是所有的值都可以被转成数值类型let str = 'hello'// 将 hello 转成数值是不现实的，当无法转换成// 数值时，得到的结果为 NaN （Not a Number）console.log(Number(str))</script>
</body>
</html>

JavaScript基础：js介绍、变量、数据类型以及类型转换

目录介绍引入方式内部方式外部形式注释和结束符单行注释多行注释结束符输入和输出输出输入变量声明赋值关键字变量名命名规则常量数据类型数值类型字符串类型布尔类型 undefined 类型转换隐式转换显式转换 Number ✨介绍 &a…...

编程日记 2024/4/17 0:01:44

【牛客SQL快速入门】SQL基础（三）

一、条件函数 IF 条件函数 IF函数是最常用到的条件函数，写法为 if(xn,a,b)，xn代表判断条件，如果xn时，那么结果返回a，否则返回b。 -- 把非北京大学的用户统一归为其他大学 Select device_id,if(university ‘北京大…...

编程日记 2024/4/17 0:00:43

Pytorch手撸Attention

Pytorch手撸Attention 注释写的很详细了，对照着公式比较下更好理解，可以参考一下知乎的文章注意力机制 import torch import torch.nn as nn import torch.nn.functional as Fclass SelfAttention(nn.Module):def __init__(self, embed_size):super(S…...

编程日记 2024/4/16 23:59:42

PyCharm 2024.1 发布：全面升级，助力高效编程！

PyCharm 2024.1 发布：全面升级，助力高效编程！ 文章目录 PyCharm 2024.1 发布：全面升级，助力高效编程！摘要引言 Hugging Face：模型和数据集的快速文档预览针对 JavaScript 和 TypeScript 的全行代…...

编程日记 2024/4/16 23:55:38

Nginx基础（06）

Nginx基础（05） uWSGI 介绍 uWSGI 是一个 Web服务器主要用途是将Web应用程序部署到生产环境中可以用来连接Nginx服务与Python动态网站 1. 用 uWSGI 部署 Python 网站项目配置 Nginx 使其可以将动态访问转交给 uWSGI 安装 python 工具及依赖安…...

编程日记 2024/4/16 23:54:37

【Qt 学习笔记】QWidget的windowOpacity属性 | cursor属性 | font属性

博客主页：Duck Bro 博客主页系列专栏：Qt 专栏关注博主，后期持续更新系列文章如果有错误感谢请大家批评指出，及时修改感谢大家点赞👍收藏⭐评论✍ QWidget的windowOpacity属性 | cursor属性 | font属性文章编号&#…...

编程日记 2024/4/16 23:52:34

Python爬虫：requests模块的基本使用

学习目标： 了解 requests模块的介绍掌握 requests的基本使用掌握 response常见的属性掌握 requests.text和content的区别掌握解决网页的解码问题掌握 requests模块发送带headers的请求掌握 requests模块发送带参数的get请求 1 为什么要重点学习requests模块&…...

编程日记 2024/4/16 23:50:32

C++traits

traits C的标准库提供了<type_traits>,它定义了一些编译时基于模板类的接口用于查询、修改类型的特征：输入的时类型，输出与该类型相关的属性通过type_traits技术编译器可以回答一系列问题：它是否为数值类型？是否为函数对象…...

编程日记 2024/4/16 23:48:31

gitee和idea集成

1 集成插件 2 配置账号密码 3 直接将项目传到仓库 4直接从gitee下载项目...

编程日记 2024/4/16 23:47:30

阿维·威格德森（Avi Wigderson）研究成果对人工智能领域的应用有哪些影响

AI人工智能的影响威格德森（Avi Wigderson）的研究成果对人工智能领域的应用产生了深远的影响。首先，威格德森在计算复杂性理论、算法和优化方面的贡献为人工智能领域提供了高效、准确的计算模型和算法。他的研究帮助我们更好地理解计算问题…...

编程日记 2024/4/16 23:46:29

【免费领取源码】可直接复用的医院管理系统！

今天给大家分享一套基于SpringbootVue的医院管理系统源码，在实际项目中可以直接复用。(免费提供，文中自取) 系统运行图（设计报告和接口文档） 1、后台管理页面 2、排班管理页面 3、设计报告包含接口文档源码免费领取方式后台私信…...

编程日记 2024/4/16 23:45:26

leetcode代码记录（全排列 II

目录 1. 题目：2. 我的代码：小结： 1. 题目： 给定一个可包含重复数字的序列 nums ，按任意顺序返回所有不重复的全排列。示例 1： 输入：nums [1,1,2] 输出： [[1,1,2], [1,2,1], [2,1…...

编程日记 2024/4/16 23:42:23

【数据结构与算法】之双向链表及其实现！

个人主页：秋风起，再归来~ 数据结构与算法个人格言：悟已往之不谏，知来者犹可追克心守己，律己则安！ 目录 1、双向链表的结构及概念 2、双向链表的实现 2.1 要实现的接口…...

编程日记 2024/4/16 23:41:22

记一次奇妙的某个edu渗透测试

前话： 对登录方法的轻视造成一系列的漏洞出现，对接口确实鉴权造成大量的信息泄露。从小程序到web端网址的奇妙的测试就此开始。（文章厚码，请见谅） 1. 寻找到目标站点的小程序进入登录发现只需要姓名加学工号就能成功…...

编程日记 2024/4/16 23:40:21

设计模式学习笔记 - 设计模式与范式 -总结：1.回顾23中设计模式的原理、背后的思想、应用场景等

1.创建型设计模式创建型设计模式包括：单例模式、工厂模式、建造者模式、原型模式。它主要解决对象的创建问题，封装复杂的创建过程，解耦对象的创建代码和使用代码。 1.单例模式单例模式用来创建全局唯一的对象。一个类只允许创建一个对象…...

编程日记 2024/4/16 23:39:20

22 文件系统

了解了被打开的文件，肯定还有没被打开的文件，就是磁盘上的文件。先从磁盘开始认识磁盘概念内存是掉电易失存储介质，磁盘是永久性存储介质磁盘的种类有SSD，U盘，flash卡，光盘，磁带。磁盘是…...

编程日记 2024/4/16 23:36:13

OVITO-2.9版本

关注 M r . m a t e r i a l , \color{Violet} \rm Mr.material\ , Mr.material , 更 \color{red}{更} 更多 \color{blue}{多} 多精 \color{orange}{精} 精彩 \color{green}{彩} 彩！ 主要专栏内容包括： †《LAMMPS小技巧》： ‾ \textbf…...

编程日记 2024/4/16 23:32:10

【Java开发指南 | 第一篇】类、对象基础概念及Java特征

读者可订阅专栏：Java开发指南 |【CSDN秋说】文章目录类、对象基础概念Java特征 Java 是一种面向对象的编程语言，它主要通过类和对象来组织和管理代码。类、对象基础概念类：类是一个模板，它描述一类对象的行为和状态。例如水…...

编程日记 2024/4/16 23:30:08

Neo4j 图形数据库中有哪些构建块？

Neo4j 图形数据库具有以下构建块 - 节点属性关系标签数据浏览器节点节点是 Graph 的基本单位。它包含具有键值对的属性，如下图所示。 NEmployee 节点在这里，节点 Name "Employee" ，它包含一组属性作为键值对。属性属性是…...

编程日记 2024/4/16 23:29:07

文章目录 TestMybatisGenerate.javapom.xmlapplication.yamlReceiveAddressMapper.xmlreceive_address.sqlReceiveAddress.javaReceiveAddressMapper.javaIReceiveAddressServiceReceiveAddressServiceImpl.javaReceiveAddressController.javaTestAddressService.javaSpringboo…...

编程日记 2024/4/16 23:28:06

✨介绍