字符串介绍

字符串

只要用引号包裹的都是字符串，引号可以是单引号、双引号、反引号(模板字符串)

创造字符串

1.字面量方式创建

var 变量名 = ‘字符。。。’

var 变量名 = “字符。。。”

2.内置构造函数的方式创建

var 变量名 = new String(‘shusdbv’)

字符串中单双引号的区别

1.单引号和双引号是不支持换行的。但是反引号是支持换行的

2.单引号和双引号中间是无法识别变量的，但是反引号中间是可以识别变量的

3.反引号识别变量的语法：${变量名}

字符串的基本操作

1.length属性，

字符串的长度，他是一个只读属性，也就是只能获取长度，不能设置。字符串的长度就是引号中字符的个数，有几个字符长度就是几，空格也算一个字符

 var str = 'hello world'
 console.log(str.length);//11

2.索引

字符串也是有索引的，也是一个只读属性，只能通过索引获取到字符，不能进行设置

字符串的索引：从左到右从0开始依次+1

获取某一个字符：字符串的变量名字[索引]

如果索引不存在，返回undefined

 var str = 'hello world'
 //         0123456789 10
       console.log(str[1]);//e
        console.log(str[11]); undefined

3.遍历字符串

for(var i = 0;i<str.length;i++){
		console.log(str[i]);
 }

字符串中的常用方法

字符串的所有方法都是不改变原始字符串的

1.charAt()

• 语法：字符串.charAt(索引)

• 返回值：会返回该索引对应的字符，如果索引不存在就返回空字符串

• var str = 'hello world ABC'
  var res = str.charAt(10)//找索引10对应的字符
  console.log(res);//d
  

2.charCodeAt()

• 语法：字符串.charCodeAt(索引)

• 返回值：会返回该索引对应的字符的编码，如果索引不存在就返回NaN

• var str = 'hello world ABC'
  var res = str.charCodeAt(0)//找索引0对应的字符的编码，也就是h对应的编码
  console.log(res);
  

3.toUpperCase()

• 语法：字符串.toUpperCase()，不需要写参数

• 返回值：将原始字符串中所有的字母转大写

• var str = 'hello world ABC'
  var res = str.toUpperCase()
  console.log(res) //HELLO WORD ABC
  

4.toLowerCase()

• 语法：字符串.toLowerCase()，不需要写参数

• 返回值：将原始字符串中所有的字母转小写

• var str = 'hello world ABC'
  var res = str.toUpperCase()
  console.log(res) //hello word abc
  

5.substr():截取

• 语法：字符串.substr(开始索引，多少个)

• 作用：从开始索引截取多少个

• 返回值：截取出来的数据

• 注意：如果不写个数就是一直截取到最后。

• var str = 'hello world ABC'
  var res = str.substr(3,5)//从3的位置开始截取5个
  var res = str.substr(3)//从3的位置开始截取到最后
  console.log(res);
  

6.substring()：截取

• 语法：字符串.subString(开始索引，结束索引)

• 注意：不包含结束索引

• 如果不写结束索引，就一直截取到最后。

• 不支持写负数

• var str = 'hello world ABC'
  var res  = str.substring(3,5)//从3的位置开始截取到5的位置
  var res  = str.substring(3)//从3的位置开始截取到最后
  var res  = str.substring(-3,-1)// 这种写法不支持
  console.log(res);
  

7.slice()截取

• 语法：字符串.slice(开始索引，结束索引)

• 和substring的区别就在于：slice可以写负数。

• var str = 'hello world ABC'
  var res  = str.slice(3,5)//从3的位置开始截取到5的位置
  var res  = str.slice(3)//
  var res  = str.slice(-3,-1)// AB
  console.log(res);
  

8.split()分割

• 语法：字符串.split(‘分隔符‘)

• 作用：按照分隔符拆分字符串

• 返回值：拆分的结果是一个数组，将字符串按照分隔符分成几段数据存储到数组中

• var str = 'hello world ABC'
  var  res = str.split(' ')
  var  res = str.split('t')
  console.log(res);
  

9.concat()

• 语法：字符串.concat(字符串1，字符串2，。。。)

• 就是做字符串拼接的，和+的效果拼接

• var str = 'hello world ABC'
  var res = str.concat('哈哈哈哈')
  var res = str+'哈哈哈哈'
  console.log(res);
  

10.indexOf()：从左到右找

• 语法：字符串.indexOf(要查找的字符，开始索引)/字符串.indexOf(要查找的字符）

• 作用：找字符对应的索引，找不见就是-1

• var str = 'hello world ABC'
  var res = str.indexOf('e')//查找e这个字符对应的索引
  var res = str.indexOf('l')//查找l这个字符对应的索引
  var res = str.indexOf('t')//查找t这个字符对应的索引,找不见，结果是-1
  var res = str.indexOf('l',4)//从4的位置开始往后找l的索引
  console.log(res);
  

11.lastIndexOf()同上

​ 从右到左找

12.includes()

• 语法：字符串.includes(字符串片段)

• 作用：判断该字符串中是否包含该字符串片段

• 返回值：包含就是true，不包含就是false

• var str = 'hello world ABC'
  var  res = str.includes('e')//找str中有没有e
  var  res = str.includes('t')//找str中有没有t
  console.log(res);
  

13.startsWith()

• 语法：字符串.startsWith(字符串片段)

• 作用：验证是否以该字符开头，是true，不是：false

• var res = str.startsWith('e')//看str是否以e开头
  var res = str.startsWith('h')//看str是否以h开头
  console.log(res);
  

14.endsWith()

• 语法同上
• 验证是否以该字符结尾，是true，不是false

var res = str.endsWith('e')//看str是否以e结尾
var res = str.endsWith('C')//看str是否以C结尾
console.log(res);

15.trim()

• 语法：字符串.trim()

• 作用：去除字符串首尾空白，中间空白是去除不了的

• 返回值：去除首尾空白之后的新字符串。

• var str2 = '       你好 哈哈      '
  var res = str2.trim()
  console.log(res);
  

16.trimStart()或者trimLeft()

• 去除字符串开头的空白

• var str2 = '       你好 哈哈      '
  var res = str2.trimStart()
  var res = str2.trimLeft()
  console.log(res);
  

17.trimEnd()或者trimRight()

• 去除字符串结尾的空白

• var str2 = '       你好 哈哈      '
  var res = str2.trimEnd()
  var res = str2.trimRight()
  console.log(res);
  

18.replace()

• 语法：字符串.replace(你要替换的字符，新字符)

• 语法：字符串.replace(旧的，新的)

• 作用：替换字符串

• 返回值：替换好的字符串

• 注意：只能替换一个片段

• var str2 = 'hello world ABC'
  // 将str2中的ABC替换成哈哈
  var res = str2.replace('ABC','哈哈')
  var res = str2.replace('world','*')
  console.log(res);
  

时间

时间对象:是一个复杂数据类型,单词是Date,他里边包含了和时间相关的信息.

创造时间对象:

1.var 变量名字 = new Date()

得到当前的系统时间：Wed Dec 07 2022 14:09:54 GMT+0800 (中国标准时间)

创建指定日期的时间对象

var 变量名 = new Date(参数)

写参数的方式分为2种

第一种:写多个数字,之间逗号隔开

特殊情况:如果你只写一个数字,这个数字指的是毫秒数,从1970年1月1日 0时0分0秒加上你写的毫秒值,就是最终的时间

如果你写了多个数字,中间逗号隔开

• 第一个数字就表示年份

• 第二个数字就表示月份,0表示1月,11就表示12月

• 第三个数字表示日期

• 第四个数字:小时

• 第五个数字:分钟

• 第六个数字:秒

• 第七个数字:毫秒

• 注意:在数字种0表示1月份

第二种:写字符串

• 形式一:‘YYYY-MM-DD HH:mm:ss’
• 形式一:‘YYYY/MM/DD HH:mm:ss’
• 在字符串中月份就正常了,1就是1月

时间对象的常用方法

单独获取某一个值的方式:

（1）获取年份:时间对象.getFullYear()

（2）获取月份:时间对象.getMonth(),0表示1月

（3） 获取日期:时间对象.getDate()

（4）获取小时:时间对象.getHours()

（5）获取分钟:时间对象.getMinutes()

（6）获取秒:时间对象.getSeconds()

（7）获取星期:时间对象.getDay()===0表示星期天 1表示星期一

（8）时间对象.getTime()：得到时间戳(从1970年1月1日 0时0分0秒到现在的时间差,结果是毫秒值)

var d = new Date()
console.log(d);
console.log(d.getFullYear());
console.log(d.getMonth());
console.log(d.getDate());
console.log(d.getHours());
console.log(d.getMinutes());
console.log(d.getSeconds());
console.log(d.getMilliseconds());
console.log(d.getDay());

单独设置某一个值:

（1）设置年份:时间对象.setFullYear()

（2）设置月份:时间对象.setMonth(),0表示1月

（3） 设置日期:时间对象.setDate()

（4）设置小时:时间对象.setHours()

（5）设置分钟:时间对象.setMinutes()

（6）设置秒:时间对象.setSeconds()

（7）设置星期:时间对象.setDay()===0表示星期天 1表示星期一

（8）时间对象.setTime()：得到时间戳(从1970年1月1日 0时0分0秒到现在的时间差,结果是毫秒值)

var d = new Date()
console.log(d);
console.log(d.setFullYear());
console.log(d.setMonth());
console.log(d.setDate());
console.log(d.setHours());
console.log(d.setMinutes());
console.log(d.setSeconds());
console.log(d.setMilliseconds());
console.log(d.setDay());

事件对象常用方法的扩展

 var d = new Date()
 console.log(d);
console.log(d.toLocaleDateString());//单独得到年月日,年月日之间/连接
console.log(d.toLocaleTimeString());//单独得到时分秒,时分秒之间:连接
console.log(d.toLocaleString());//得到年月日时分秒,有利于阅读的一种形式

定时器

定时器其实就是让代码延迟执行的一种手段.

开启定时器:

1.延迟定时器,(延迟多长时间才执行代码)

• 语法:setTimeout(函数,时间)

• 延迟多长时间执行该函数.

• var res1 =  setTimeout(function(){
          console.log('我执行了1');
  },2000)//2秒时候执行该函数
  console.log('res1:'+res1);
  

2.间隔定时器(循环定时器)(每间隔一段时间就执行一次代码)

• 语法:setInterval(函数,时间)

• 每间隔多长时间就执行一次函数

• 注意:时间是不带单位的,你写的那个数字是毫秒值

• 定时器的返回值是一个数字,该数字表示你是页面中的第几个定时器,返回1就代表是第一个定时器.

•  var res2 = setInterval(function(){
              console.log('我执行了2');
          },2000)//2秒执行一次函数
  console.log('res2:'+res2);
  
  

关闭定时器

停止定时器的语法:

clearInterval(你要停止的定时器)

clearTimeout(你要停止的定时器)

代码的执行顺序

从代码执行顺序的角度分类,代码可以分为2类

第一类:同步代码,不做特别说明的,全都是同步代码

同步代码:从上到下依次执行

第二类:异步代码,定时器是我们先在接触的唯一的异步代码

异步代码:等同步代码执行完毕,才会执行异步代码.

浏览器执行代码的机制:

先阅读同步代码,碰到异步代码的时候,会先把异步代码放到异步代码的队列中,等所有的同步代码全部执行完毕,才会挨个执行异步代码.