JavaScript 新手村闯关:数据类型的 “花式玩法”

0 阅读2分钟

一、基本数据类型

1. 字符串类型(String)

  • 定义:使用单引号(')、双引号(")或反引号(`)包裹的数据都称为字符串。推荐使用单引号。例如:

let str = 'pink';
let str1 = "write";
let str2 = `我`;
let tel = '15799990000'; // 看上去是数字,实际是字符串
let str3 = ''; // 空字符串
  • 引号嵌套与转义:可以使用内双外单、外双内单的方式嵌套引号,必要时使用转义符(``)输出单引号或双引号。

console.log('你是个"好人"'); // 内双外单
console.log("你是个'好人'"); // 外双内单
console.log('你是个'好人''); // 使用转义符输出单引号
  • 字符串拼接:使用+号进行字符串拼接。

document.write('我' + '喜欢你'); // 字符串相连
let name = 'du';
document.write(name + "喜欢你");

2. 布尔类型(Boolean)

  • 布尔型字面量为truefalse。例如:

console.log(3 > 4); // false
let islike = false;
document.write(islike);

3. 未定义类型(Undefined)

  • 弱数据类型,声明一个变量但未赋值时,其值为undefined。例如:

let num;
console.log(num); // undefined

4. 空类型(Null)

  • 变量赋值为null,表示内容为空。例如:

let obj = null;
console.log(obj); // null
  • undefinednull在计算时有区别:

console.log(undefined + 1); // NaN
console.log(null + 1); // 1

二、模板字符串

  • 外面使用反引号(`),内部使用${变量名}插入变量。例如:

let age = 18;
document.write(`我今年${age}岁了`);

三、数据类型检测

  • 使用typeof运算符检测数据类型。例如:

let num = 10;
console.log(typeof num); // number
let str = 'pink';
console.log(typeof str); // string
let flag = false;
console.log(typeof flag); // boolean
let un;
console.log(typeof un); // undefined
let obj = null;
console.log(typeof obj); // object

四、数据类型转换

1. 隐式转换

  • 例如字符串和数字相加时会进行隐式转换:

console.log('pink' + 1); // pink1

2. 显式转换

  • Number() :将数据转换为数字类型,若无法转换则返回NaN

let str = '123';
console.log(Number(str)); // 123
console.log(Number('pink')); // NaN
  • parseInt() :只保留整数部分。

console.log(parseInt('12px')); // 12
console.log(parseInt('12.34px')); // 12
console.log(parseInt('abc12.91px')); // NaN
  • parseFloat() :可以保留小数部分。

console.log(parseFloat('12px')); // 12
console.log(parseFloat('12.34px')); // 12.34
console.log(parseInt('abc12.33px')); // NaN

五、实际案例

1. 求和

// 1. 用户输入 prompt 得到的是字符串类型,要转换成数字型
let num1 = +prompt('请输入第一个数字:');
let num2 = +prompt('请输入第二个数字:');
// 2. 输出
alert(`两个数相加的和是:${num1 + num2}`);