字符串
- 在js中所有使用引号包裹的内容,都是字符串
- 在js中字符串除了是基本数据类型之外
+ 还是临时包装数据类型
字符串特性
1. 长度
- 是只读的,不可修改
- 语法: 字符串.length
+ 返回字符串的字符长度
2. 索引
- 是只读的,不可修改
- 语法: 字符串[索引]
3. 遍历字符串
- 可以利用索引和长度特性来遍历
字符串的创建
字面量的创建
+ 语法:
- 变量 = '12324'
+ 此方式创建的字符串都是基本数据类型
构造函数的创建
+ 语法:
- new String('内容')
+ 返回值就是一个字符串(对象）临时包装数据类型
临时包装数据类型:
+ 一些基本数据类型的 数据在访问方法或属性的时候,会临时的将这个基本数据类型装换为`对应的` 对象数据类型,然后访问方法属性; 当访问结束后,自动转回为基本数据类型(临时对象销毁了)
- 在js中 字符串,数值,布尔 都是临时包装数据类型
字符串编码
字符在内存中存储 本质上是以 二进制数进行存储
- 每个字符 对应了一个 二进制数
- 我们把字符和对应的 二进制数 的这种一一对应关系 做成了一个表(编码表)
ASCII编码表 只有128位编码
编码表不够的情况下 出现了 万国码(Unicode)
常见的汉字编码 4e00-9fa5
字符串的案例
走马灯
分类
- 数字字符串
- 普通字符串
- HTML格式字符串
- 查询字符串QueryString 'k1=v1&k2=v2'
- json格式字符串
QueryString查询字符串
- 用于前端向后端提交数据
- 常出现在请求的地址栏中
+ 在url地址的?后面的都是查询字符串json格式字符串
- 主要用于户前端后交互
- json格式的数据比较严格
+ 只能使用单引号 包裹
+ 一般只有对象和数组结构的数据
+ 对象的属性名必须使用双引号包裹
+ 值如果是文本内容必须使用双引号包裹
+ 值如果是数字或布尔值可以不用双引号包裹
+ 数组或对象的最后一项不能多逗号
常用API
charAt 根据索引查找字符内容；返回对应索引的字符,如果不存在返回空字符''
charCodeAt 根据索引查找字符内容并返回字符编码；返回对应索引的字符编码,如果不存在返回NaN
toUpperCase/toLowerCase 对字母字符串大小写切换
indexOf(内容,起始索引)/lastIndexOf/includes 字符串查找
substr/substring/slice 截取字符串
substr
语法: 字符串.substr(起始索引,个数)
+ 如果不写个数,则截取到最后
作用: 截取字符串内容
返回值: 截取的字符串内容
substring
语法: 字符串.substring(索引,索引)
+ 自动将较小的索引作为起始索引
+ 自动将较大的索引作为结束索引
- 包前不包后作用: 截取字符串内容
返回值: 截取的字符串内容
slice
语法: 字符串.slice(起始索引,结束索引)
+ 包前不包后
+ 可以使用负数 -1 表示最后一个字符
作用: 截取字符串内容
返回值: 截取的字符串内容
split 分割字符串
语法: 字符串.split(分隔符)
+ 如果不传分隔符或传入的分隔符在字符串中不存在,则会将字符串当做数组的一个元素
+ 如果传入的是空字符串则会将 字符串按照每个每个字符分割
作用: 字符串分割为数组返回值: 将字符串按照分隔符分割为多部分组成数组返回
replace(换下的字符内容,换上的内容) 替换字符串
repeat 复制字符串
trim/trimStart/trimLeft/trimEnd/trimRight 清除空格符
startsWith/endsWith 判断字符串是否以传入内容开头/结尾 返回布尔值
search 获取传入内容的索引,如果不存在返回 -1
数学方法
API
数学方法
- js中有一个Math对象
- 这个对象中有很多数字数学操作
1. round()
- 语法: Math.round(数字)
- 返回值: 将传入的数字四舍五入
2. floor()
- 语法: Math.floor(数字)
- 返回值: 将传入的数字向下取整
3. ceil()
- 语法: Math.ceil(数字)
- 返回值: 将传入的数字向上取整
4. abs()
- 语法: Math.abs(数字)
- 返回值: 将传入的数字取绝对值
5. pow()
- 语法: Math.pow(数字,多少次幂)
- 返回值: 计算次幂数
6. sqrt()
- 语法: Math.sqrt(数字)
- 返回值: 计算传入数字的开平方
7. max()
- 语法: Math.max(数字,数字,数字....)
- 返回值: 获取传入数字中的最大值
8. min()
- 语法: Math.min(数字,数字,数字....)
- 返回值: 获取传入数字中的最小值
9. PI
- 语法: Math.PI
- 返回值: 圆周率
10. random
- 语法: Math.random()
- 返回值: 0~1的随机数 包含0,不包含1
随机整数
<script> // 获取0~10的随机整数(要求包含0和10) // Math.random() [0~1) 随机数 // Math.random()*11 [0~11) 随机数 // Math.floor(Math.random()*11) [0~10] 随机整数 // console.log( Math.floor(Math.random()*11) ) // 获取10~20的随机整数(要求包含10和20) // Math.random()*11+10 [10~21) 随机数 // Math.floor(Math.random()*11+10) [10~20] 随机整数 // console.log( Math.floor(Math.random()*11+10) ) // 获取15~30的随机整数(要求包含15和30) // Math.random()*16 [0~16) 随机数 ///30-15+1 = 16 // Math.random()*16+15 [15~31) 随机数 // Math.floor(Math.random()*16+15) [15~30] 随机整数 // console.log( Math.floor(Math.random()*16+15) ) // 封装一个函数获取范围随机整数 function getNum(n,m) { var min = Math.min(n,m); var max = Math.max(n,m); return Math.floor(Math.random()*(max-min+1)+min); } // console.log( getNum(10,30) ) // console.log( getNum(30,10) ) /* Math.random()*(max-min+1) [0,max-min+1) 随机数 Math.random()*(max-min+1)+min [min,max+1) 随机数 Math.floor(Math.random()*(max-min+1)+min); [min,max]随机整数 */ </script>验证码
var code = ''; while (code.length < 4) { // 四位的验证码 var index = getNum(0, str.length - 1); // 判断 通过index从str中随机获取的字符 在code中是否存在 while (code.includes(str[index])) { index = getNum(0, str.length - 1); } // 直到index对应的字符在code中不存在,才拼接到code中 code += str[index] }
进制转换
parseInt
- 语法: parseInt(字符串,将字符串当做几进制看)
+ 第二个参数的范围 2~36
+ 第二个参数不写,默认是10
- 返回值: 十进制的数值(整数)或NaN
toString
语法: 数值.toString(转为几进制的数字字符串)
+ 默认不传递参数就是10
+ 范围 2~36
返回值: 对应进制的字符串
时间对象
创建
1. new Date() 创建的是当前的时间对象(终端事件)
2. new Date(参数)
数字
一个数字参数 表示传入的是时间戳
- 时间戳: 格林威治时间(1970.1.1 00:00:00) 到某个时间点的毫秒数 就是这个时间点的时间戳
两个以上参数
- year 年份
- month 月份(范围是0~11)
+ 0表示1月 11表示12月
- day 日期(范围是1~31)
- hours 时(范围是0~23)
- minutes 分
- seconds 秒
字符串
+ 一个时间格式的字符串
- 比如: '2023-03-23 10:32:10'
API
set
setFullYear 设置年份
setMonth 设置月份 (0~11) 0表示1月份 11表示12月份
setDate 设置日期
setHours 设置小时
setMinutes 设置分钟
setSeconds 设置秒钟
setMilliseconds 设置毫秒
setTime 设置时间戳
get
getFullYear 获取年份
getMonth 获取月份 (0~11) 0表示1月份 11表示12月份
getDate 获取日期
getDay 获取周期 (0~6) 6表示周六 0表示周天
getHours 获取小时
getMinutes 获取分钟
getSeconds 获取秒钟
getMilliseconds 获取毫秒
getTime 获取时间戳
时间倒计时
需要一个间隔定时器
修改DOM元素的文本内容
- 语法: 元素.innerHTML = 内容
+ 页面中的元素内容会被覆盖为我们赋值的内容
var t = new Date(2023,4,1);
function bindDiv(t1) {
var t2 = new Date()
var res = getDiffTime(t1,t2);
var str = `距离5.1放假还有:${res.days}天${res.hours}小时${res.minutes}分钟${res.seconds}秒`
// 将获取的str 显示在div中
dv.innerHTML = str;
}
bindDiv(t);// 页面刷新就调用
setInterval(bindDiv,1000,t)
封装获取时间差的方法
function getDiffTime(t1, t2) {
// 获取两个时间对象的时间戳 然后相减的到 时间戳的差值
// var diff1 = Math.abs(t1.getTime() - t2.getTime());
// 直接两个时间对象相减就可以得到 时间戳的差值
var diff = Math.floor(Math.abs(t1 - t2)/1000);
// 时间对象转为数值类型--->时间对象会调用valueOf方法获取得到的就是时间戳
// 计算相差的天数 小时 分钟 秒数
var days = parseInt(diff/(24*60*60));
var hours = parseInt(diff%(24*60*60)/(60*60));
var minutes = parseInt(diff%(60*60)/60);
var seconds = diff%60;
return {
days:days,
hours:hours,
minutes:minutes,
seconds:seconds,
}
}
1328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
