JavaScript中的字符串是一串字符的序列,可以使用引号(单引号或双引号)来表示。字符串可以包含字母、数字、符号和空格等字符。例如:
let str1 = "Hello";
let str2 = 'World';
let str3 = `JavaScript`;
在JavaScript中,字符串是不可变的,也就是说一旦创建了一个字符串,就无法修改它的值。但是可以通过使用字符串方法来操作字符串,例如连接字符串、截取子串、替换字符等。
定时器是JavaScript中的一个功能,用于推迟代码的执行或周期性地执行代码。定时器有两种类型:setTimeout和setInterval。
setTimeout函数用于在指定的时间后执行一次代码。它接受两个参数,第一个参数是要执行的代码,可以是函数或字符串,第二个参数是延迟的时间(以毫秒为单位)。例如:
setTimeout(() => {
console.log("Hello, World!");
}, 2000);
上述代码表示延迟2秒后输出"Hello, World!"。
setInterval函数用于每隔一段时间重复执行一次代码。它也接受两个参数,第一个参数是要执行的代码,第二个参数是重复执行的间隔时间(以毫秒为单位)。例如:
setInterval(() => {
console.log("Hello, World!");
}, 1000);
上述代码表示每隔1秒输出一次"Hello, World!"。需要注意的是,setInterval会一直执行下去,直到页面关闭或清除定时器。可以使用clearInterval函数来清除定时器。
1-字符串的基本操作
在JavaScript中,字符串是不可变的字符序列,具有多种基本操作。以下是一些字符串基本操作的例子:
// 创建一个字符串
let myString = "Hello, World!";
// 1. 访问字符串中的字符:通过索引访问
console.log(myString[0]); // 输出: "H"
// 2. 字符串长度
console.log(myString.length); // 输出: 13
// 3. 字符串连接
let greeting = "Welcome " + myString; // 使用加号(+)连接字符串
console.log(greeting); // 输出: "Welcome Hello, World!"
// 4. 截取字符串的一部分
let substring = myString.substring(7, 12); // 提取索引7到11之间的子串
console.log(substring); // 输出: "World"
// 5. 查找子字符串
let index = myString.indexOf("World"); // 返回"World"首次出现的索引位置
console.log(index); // 输出: 7
// 6. 转换大小写
let upperCase = myString.toUpperCase(); // 将字符串转换为大写
console.log(upperCase); // 输出: "HELLO, WORLD!"
let lowerCase = myString.toLowerCase(); // 将字符串转换为小写
console.log(lowerCase); // 输出: "hello, world!"
// 7. 替换子字符串
let replaced = myString.replace("World", "Universe");
console.log(replaced); // 输出: "Hello, Universe!"
// 8. 判断是否包含某个子字符串
if (myString.includes("World")) {
console.log("The string contains 'World'.");
}
// 9. 分割字符串
let words = myString.split(", "); // 使用逗号和空格作为分隔符分割字符串
console.log(words); // 输出: ["Hello", "World!"]
以上展示了JavaScript中一些常见的字符串基本操作,包括访问、获取长度、拼接、截取、查找子串、转换大小写、替换子串、判断是否包含特定子串以及分割字符串等。
2-案例-统计字符出现次数
在JavaScript中,统计字符串中每个字符出现的次数可以使用对象(Object)来存储结果。以下是一个简单的例子:
function countCharacters(str) {
let charCount = {};
// 遍历字符串中的每个字符
for (let char of str) {
// 如果该字符已经在对象中,则增加计数
if (charCount[char]) {
charCount[char]++;
}
// 否则,在对象中创建新的键并设置值为1
else {
charCount[char] = 1;
}
}
return charCount;
}
// 测试案例
let testString = "Hello, World!";
console.log(countCharacters(testString));
// 输出:{ H: 1, e: 1, l: 3, o: 2, ',': 1, ' ': 1, W: 1, r: 1, d: 1, '!': 1 }
在这个例子中,我们定义了一个名为countCharacters
的函数,它接受一个字符串作为参数。然后通过遍历字符串的每个字符,并使用一个空对象charCount
来记录每个字符出现的次数。对于遇到的每一个字符,如果它已经在对象中,则递增其对应的值;如果不在,则将其添加到对象中并初始化值为1。最后返回这个包含了字符及其出现次数的对象。
3-字符串常用方法
在JavaScript中,字符串有许多常用的方法。以下是一些例子:
// 创建一个示例字符串
let myString = "Hello, World! How are you?";
// 1. length属性:获取字符串长度
console.log(myString.length); // 输出: 27
// 2. toUpperCase():将字符串转换为大写
console.log(myString.toUpperCase()); // 输出: "HELLO, WORLD! HOW ARE YOU?"
// 3. toLowerCase():将字符串转换为小写
console.log(myString.toLowerCase()); // 输出: "hello, world! how are you?"
// 4. includes():检查字符串是否包含子字符串
console.log(myString.includes("World")); // 输出: true
// 5. indexOf():查找指定子字符串首次出现的位置(返回索引)
console.log(myString.indexOf("World")); // 输出: 7
// 6. slice():提取字符串的一部分
console.log(myString.slice(7, 13)); // 输出: "World"
// 7. substring():与slice类似,但不接受负数参数
console.log(myString.substring(7, 13)); // 输出: "World"
// 8. split():按照指定分隔符将字符串分割成数组
console.log(myString.split(" ")); // 输出: ["Hello,", "World!", "How", "are", "you?"]
// 9. replace():替换字符串中的某个部分
console.log(myString.replace("World", "Universe")); // 输出: "Hello, Universe! How are you?"
// 10. trim():去除字符串首尾空白字符
let trimmedString = " Hello, World! ";
console.log(trimmedString.trim()); // 输出: "Hello, World!"
以上展示了JavaScript中字符串的一些常见操作方法,包括获取长度、转换大小写、判断包含关系、查找位置、截取子串、分割为数组以及替换和修剪等。
4-案例-模糊查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 定义一个数组
var arr= ["aaa","abc","bcf","bcd","ddd","ccd","bbb",'ggg']
// 使用数组的filter方法和字符的indexOf方法进行查询
var input = prompt("请输入查询的内容")
var res = arr.filter(function(item){
return item.indexOf(input)>-1
})
console.log(res)
</script>
</body>
</html>
5-json格式字符串
一个JSON格式的字符串示例如下:
{
"name": "John Doe",
"age": 30,
"isMarried": false,
"skills": ["JavaScript", "Python", "HTML/CSS"],
"address": {
"street": "123 Main St.",
"city": "New York",
"country": "USA"
}
}
这个JSON字符串描述了一个包含姓名、年龄、婚姻状况、技能列表以及地址信息的对象。在JavaScript中,你可以将这个字符串转换为对象进行操作,例如:
let jsonString = '{"name": "John Doe","age": 30,"isMarried": false,"skills": ["JavaScript", "Python", "HTML/CSS"],"address": {"street": "123 Main St.","city": "New York","country": "USA"}}';
// 将JSON字符串转换为JavaScript对象
let user = JSON.parse(jsonString);
console.log(user.name); // 输出: John Doe
console.log(user.age); // 输出: 30
console.log(user.skills[1]); // 输出: Python
console.log(user.address.city); // 输出: New York
通过JSON.parse()
方法可以将JSON格式的字符串解析成JavaScript对象,然后就可以像操作普通对象一样访问和修改这些数据。同样,使用JSON.stringify()
方法可以把JavaScript对象转换回JSON格式的字符串。
6-模板字符串
在JavaScript中,模板字符串(Template Literals)是一种创建多行字符串或包含嵌入表达式的字符串的简洁方式。以下是一个使用模板字符串的例子:
// 定义变量
let name = "Alice";
let age = 25;
// 使用模板字符串拼接信息
let greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // 输出: Hello, my name is Alice and I am 25 years old.
在这个例子中,模板字符串使用了反引号 () 而不是单引号 ('') 或双引号 (")。通过
${}` 可以嵌入任何表达式,其结果将被转换为字符串并插入到最终字符串的相应位置。
另外,模板字符串还可以跨越多行,不需要使用换行符或 \
进行转义:
let poem = `
Roses are red,
Violets are blue,
${name}'s favorite color
might be something else too.
`;
console.log(poem);
这段代码将会输出一个多行字符串,并且其中包含了变量 name
的值。
7-数字常用方法
JavaScript中处理数字的常用方法有多种,以下是一些例子:
- toFixed():用于将数字转换为指定位数的小数格式字符串。
let num = 3.1415926535;
console.log(num.toFixed(2)); // 输出:"3.14"
- toExponential():将数字转换为科学记数法表示的字符串。
let num = 123456789;
console.log(num.toExponential(3)); // 输出:"1.235e+8"
- toFixed() 和 toPrecision():
toFixed()
指定小数点后的位数,toPrecision()
指定总的有效数字位数(包括整数部分和小数部分)。
let num = 123456.789;
console.log(num.toPrecision(5)); // 输出:"123000"
- Math对象的方法:
Math.round()
对数值进行四舍五入。Math.floor()
向下取整。Math.ceil()
向上取整。Math.abs()
获取绝对值。
let num1 = 3.14;
console.log(Math.round(num1)); // 输出:3
let num2 = -12.34;
console.log(Math.floor(num2)); // 输出:-13
console.log(Math.ceil(num2)); // 输出:-12
console.log(Math.abs(num2)); // 输出:12.34
- Number.isNaN():检查一个值是否为NaN。
let value = "abc";
console.log(Number.isNaN(value)); // 输出:true
- isFinite():判断给定的值是否为有限的数字。
let num = Infinity;
console.log(isFinite(num)); // 输出:false
这些只是JavaScript中处理数字的一些常见方法,实际上还有更多其他方法可用于数学运算、进制转换等场景。
8-案例-随机整数
在JavaScript中,生成一个指定范围内的随机整数可以使用Math.random()
和一些数学运算。以下是一个生成1到10之间(包含边界)随机整数的例子:
// 使用 Math.random() 和 Math.floor() 方法生成 [1, 10] 范围内的随机整数
let randomInt = Math.floor(Math.random() * (10 - 1 + 1)) + 1;
console.log(randomInt);
解释:
Math.random()
返回的是 [0, 1) 区间内的浮点数,即大于等于0且小于1。- 我们将其乘以
(10 - 1 + 1)
来得到 [0, 10) 区间的浮点数。- 然后使用
Math.floor()
对结果向下取整,得到 [0, 9] 区间内的整数。- 最后加上1,使得最终结果位于 [1, 10] 区间内。
这样,每次执行上述代码都会得到1到10之间的一个随机整数。
9-时间对象
当然,以下是一个JavaScript中使用Date
对象的简单示例,它展示了如何创建一个当前时间的Date
实例,并获取和格式化当前日期与时间:
// 创建一个表示当前时间的Date对象
var currentDate = new Date();
// 获取当前日期(年-月-日)
var currentDateString = currentDate.toISOString().split('T')[0];
console.log("当前日期: " + currentDateString);
// 获取当前时间(小时:分钟:秒)
var currentTimeString = currentDate.toLocaleTimeString();
console.log("当前时间: " + currentTimeString);
// 获取Unix时间戳(毫秒数)
var timestampInMilliseconds = currentDate.getTime();
console.log("当前时间戳(毫秒): " + timestampInMilliseconds);
// 设置特定日期和时间
var specificDate = new Date(2024, 1, 7); // 月份从0开始计数,所以这里是2月
console.log("特定日期的时间戳: " + specificDate.getTime());
// 格式化输出特定日期
var options = { year: 'numeric', month: 'long', day: 'numeric' };
console.log("特定日期(格式化后): " + specificDate.toLocaleDateString("en-US", options));
在这个例子中:
new Date()
创建了一个表示当前日期和时间的对象。toISOString()
方法返回ISO格式的日期字符串,并通过分割来提取日期部分。toLocaleTimeString()
方法用于获取本地时间格式的时间字符串。getTime()
方法返回从1970年1月1日0点0分0秒(UTC时间)到当前时间的毫秒数。- 当我们直接传入参数给
new Date(year, monthIndex [, day, hour, minute, second, millisecond])
构造函数时,可以设置特定日期。toLocaleDateString()
方法可以根据指定的选项格式化日期字符串。
10-时间对象常用方法
在JavaScript中,Date
对象提供了很多用于操作日期和时间的方法。下面是一个包含了几个常用方法的例子:
// 创建一个表示当前时间的Date对象
let now = new Date();
// 常用方法示例:
console.log("当前时间(默认格式): ", now); // 输出当前日期和时间
// 获取完整年份
let year = now.getFullYear();
console.log("当前年份: ", year);
// 获取月份(注意:JavaScript中的月份是从0开始计数的,所以1代表二月)
let month = now.getMonth() + 1; // 加1以获得常规月份表示
console.log("当前月份: ", month);
// 获取日
let day = now.getDate();
console.log("当前日期: ", day);
// 获取小时(24小时制)
let hours = now.getHours();
console.log("当前小时: ", hours);
// 获取分钟
let minutes = now.getMinutes();
console.log("当前分钟: ", minutes);
// 获取秒
let seconds = now.getSeconds();
console.log("当前秒数: ", seconds);
// 获取毫秒
let milliseconds = now.getMilliseconds();
console.log("当前毫秒数: ", milliseconds);
// 设置日期和时间
let specificDate = new Date(2024, 3, 15, 10, 30, 0); // 设置为2024年4月15日10点30分0秒
console.log("特定日期和时间: ", specificDate);
// 格式化输出日期
let formattedDate = now.toLocaleDateString(); // 根据本地环境格式化日期
console.log("格式化后的日期: ", formattedDate);
// 格式化输出时间
let formattedTime = now.toLocaleTimeString(); // 根据本地环境格式化时间
console.log("格式化后的时间: ", formattedTime);
这个例子展示了如何获取和设置日期的各个部分,以及如何格式化显示日期和时间。当然,Date
对象还有其他许多方法,例如 setFullYear()
, getUTC*()
系列方法(用于处理UTC时间),以及 getTime()
方法返回Unix时间戳等。
11-定时器
JavaScript中的定时器主要有两种类型:setTimeout
和 setInterval
。下面分别给出一个例子:
setTimeout 示例
// 在1秒后执行一次 alert 操作
setTimeout(function() {
alert('Hello, 这是一个延迟一秒的提示!');
}, 1000); // 参数1000代表延迟时间,单位是毫秒
// 使用箭头函数简化写法
setTimeout(() => alert('Hello after 1 second'), 1000);
setInterval 示例
// 每隔2秒执行一次 alert 操作,直到手动清除定时器
let intervalId = setInterval(function() {
alert('每隔两秒出现一次的消息');
}, 2000);
// 清除定时器(在5次之后)
let counter = 0;
function showMessage() {
alert(`这是第 ${++counter} 次消息`);
if (counter === 5) {
clearInterval(intervalId);
console.log('定时器已清除');
}
}
intervalId = setInterval(showMessage, 2000);
在这两个示例中:
setTimeout
的作用是在指定的延迟(以毫秒为单位)后调用指定的回调函数。setInterval
则会按照指定的时间间隔重复调用回调函数,直到被显式地调用clearInterval
方法停止。
注意:实际使用时,尤其是对于异步编程场景,请确保正确管理这些定时器,避免资源泄露。例如,在适当的时候清理不再需要的定时器。
12-案例-倒计时
以下是一个使用JavaScript实现倒计时的例子,它从特定的时间开始倒数,显示剩余的天数、小时数、分钟数和秒数:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒计时示例</title>
<style>
#countdown {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div id="countdown"></div>
<script>
// 目标结束时间,例如:2023年1月1日 00:00:00(UTC时间)
const targetDate = new Date("January 1, 2023 00:00:00").getTime();
function updateCountdown() {
// 当前时间
const now = new Date().getTime();
// 计算时间差(毫秒)
let distance = targetDate - now;
// 时间单位转换(天、小时、分钟、秒)
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / 1000);
// 在HTML中显示倒计时
document.getElementById("countdown").innerHTML = `
<span>${days} 天 </span>
<span>${hours} 小时 </span>
<span>${minutes} 分钟 </span>
<span>${seconds} 秒 </span>
`;
// 如果倒计时未结束,则继续更新
if (distance > 0) {
setTimeout(updateCountdown, 1000);
} else {
// 倒计时结束时可以执行一些操作,比如提示活动已开始
document.getElementById("countdown").innerHTML = "活动已经开始!";
}
}
// 初始化倒计时
updateCountdown();
</script>
</body>
</html>
此代码会在页面上实时显示距离指定日期的倒计时。当倒计时结束后,会显示“活动已经开始!”的文字。
最后求点赞,求分享,求抱抱…