脚本宝典收集整理的这篇文章主要介绍了温习之认识JavaScript数据类型基础及模板字符串总结,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
js是运行在浏览器的一门编程语言,可以实现数据交互.
通过 script
标签包裹 JavaScript 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 引入方式</title>
</head>
<body>
<!-- 内联形式:通过 script 标签包裹 JavaScript 代码 -->
<script>
alert('JavaScript YYDS!');
</script>
</body>
</html>
一般将 JavaScript 代码写在独立的以 .js 结尾的文件中,然后通过 script
标签的 src
属性引入
// demo.js
document.write('JavaScript YYDS!');
<!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(666);
</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>
关键字是 JavaScript 中内置的一些英文词汇(单词或缩写),它们代表某些特定的含义,如 let
的含义是声明变量的,看到 let
后就可想到这行代码的意思是在声明变量,如 let age;
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 的值就成了 18
document.write(age);
// 也可以声明和赋值同时进行
let str = 'hello world!';
alert(str);
</script>
</body>
</html>
JavaScript 使用专门的关键字 let
和 var
来声明(定义)变量,在使用时需要注意一些细节:
以下是使用 let
时的注意事项:
以下是使用 var
时的注意事项:
大部分情况使用 let
和 var
区别不大,但是 let
相较 var
更严谨,因此推荐使用 let
。
关于变量的名称(标识符)有一系列的规则需要遵守:
注:所谓关键字是指 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>
计算机内万事万物都是数据,每个数据都有他相应的数据类型,js里的数据类型分为数字(Number),字符串(String),布尔(Boolean),undefined,null,其中undefined表示定义了未赋值,null表示的是定义了已复制,但赋的值为空对象(object) .
基本数据类型:
number 数字型
string 字符串型
boolean布尔型
undefined 未定义型
null 空类型
引用数据类型:
object 对象
function 函数
array 数组
通过typeof这个运算符检验数据类型,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 数据类型</title>
</head>
<body>
<script>
// 检测 1 是什么类型数据,结果为 number
document.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); // 结果为 number
document.write(typeof price); // 结果为 number
document.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); // 结果为 string
documeent.write(typeof gender); // 结果为 string
documeent.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>
let boolean1 = true;
let boolean2 = false;
document.write(typeof isCool); // 结果为 boolean
</script>
</body>
</html>
未定义是比较特殊的类型,只有一个值 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 中变量的值决定了变量的数据类型。
null表示的是定义了已复制,但赋的值为空对象
补充知识:模板字符串
特点:
1.模板字符串中间文字和变量相连不需要使用+号,直接相连即可,但变量需要用${}包裹
2.如变量和变量相乘,则${变量a*变量b,{}中可进行运算.
3.模板字符串中间可以使用回车,回车不会代表单行结束符,所以可以在模板字符串中间添加多行html代码
<body>
<script>
// 准备三个弹出框,并将弹出框搜集的信息保存在变量当中
let name = prompt('请输入您的姓名')
let age = prompt('请输入您的年龄')
let sex = prompt('请输入您的性别')
// 在浏览器中写入搜集的三个变量信息
document.write(`${name}<br>
${age}<br>
${sex}`)
document.write(`年龄和年龄相乘数值为${age*age}`)
</script>
</body>
指某些运算符被执行时,系统内部自动将自动将数据类型进行转换,这种转换称之为隐式转换,+号两边只要有字符串,则输出内容会变为字符串,除了+意外的运算符,比如-,*,/都会将其左右的字符串数字隐式转换为数字
<!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 减去 数值 2
console.log(num - num2);
let a = prompt('请输入一个数字');
let b = prompt('请再输入一个数字');
alert(a + b);
</script>
</body>
</html>
编写程序时过度依靠系统内部的隐式转换是不严禁的,因为隐式转换规律并不清晰,大多是靠经验总结的规律。为了避免因隐式转换带来的问题,通常根逻辑需要对数据进行显示转换。
通过 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 转换成数值 12
t = Number(t);
// 检测转换后的类型
// console.log(typeof t);
console.log(t + f); // 结果为 20
// 并不是所有的值都可以被转成数值类型
let sstr = '11hello';
// 将 hello 转成数值是不现实的,当无法转换成
// 数值时,得到的结果为 NaN (Not a Number)
console.log(Number(str));
let str = null
let str1 = true
let str2 = false
let str3 = undefined
let str4 = '111'
console.log(Number(null)) //null转换为数字为0
console.log(Number(str1)) //true转换为数字为1
console.log(Number(str2)) //false转换为数字为0
console.log(Number(str3)) //undefined转换为数字为NAN
console.log(Number(str4)) //字符串类型的数字转换为数字为数字
</script>
</body>
</html>
只保留整数,将变量转化为数字类型
<html lang="en">
<head>
</head>
<body>
<script>
let num1='123abc'
// 仅会保留整数部分
console.log(parseInt(num1));
</script>
</body>
</html>
将变量转化为数字类型,可保留小数
<html lang="en">
<head>
</head>
<body>
<script>
let num1 = '123abc'
// 仅会保留整数部分
console.log(parseInt(num1));
let num2 = '12.001abc'
// 整数小数都会保留
console.log(parseFloat(num2));
console.log(parseInt(num1));
</script>
</body>
</html>
将变量转化为字符串类型
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
let num1 = '123abc'
// 仅会保留整数部分
console.log(parseInt(num1))
let num2 = '12.001abc'
// 整数小数都会保留
console.log(parseFloat(num2))
console.log(parseInt(num1))
let num3 = 10
console.log(num3.toString(2))//转换二进制字符串
console.log(num1.toString(2))//转换不了二进制直接转换字符串
console.log(String(num3))//转换字符串
</script>
</body>
</html>
字符串类型:空字符串会转成false 其他的都会被转换成true 数字类型:0与NaN会转换成 false 其他的都会被转换成true undefined类型:会被转换成false null 类型:会被转换成false
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
let str = ''
let str1 = 0
let str2 = NaN
let str3 = undefined
let str4 = null
let str5 = '0'
let str6 = 'NAN'
console.log(Boolean(str)) //转换为false
console.log(Boolean(str1)) //转换为false
console.log(Boolean(str2)) //转换为false
console.log(Boolean(str3)) //转换为false
console.log(Boolean(str4)) //转换为false
console.log(Boolean(str5)) //转换为true
console.log(Boolean(str6)) //转换为true
</script>
</body>
</html>
以上是脚本宝典为你收集整理的温习之认识JavaScript数据类型基础及模板字符串总结全部内容,希望文章能够帮你解决温习之认识JavaScript数据类型基础及模板字符串总结所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。