丸子学JS（学习1小时 -String和Date练习）

前言

string和date的学习更多的是方法的学习，捣鼓了一晚上，终究也是把笔记做完了，学习真的是需要通过大量的练习来融会贯通

查找方法

• 字符方法
  a) charAt()
  ■ 功能 返回字符串中第n个字符
  ■ 参数 超出范围返回空字符串
  ■ 返回值 string中第n个字符的实际值
  b) charCodeAt()
  ■ 功能 返回字符中第n个字符的代码
  ■ 参数 超出范围返回NaN
  ■ 返回值 string中第n个字符的unicode编码
  c) fromCharCode()
  ■ 功能 根据字符编码创建字符串
  ■ 参数 0个或多个整数，代表字符的unicode编码
  ■ 返回值 由指定编码字符组成的字符串
  ■ 特性 静态方法，实为构造函数String（）的属性

尝试一下

let oBtns = document.querySelectorAll('button')
let oRes = document.querySelectorAll('.res')
var str = '爱我中华';
oBtns[0].onclick = function() {
    oRes[0].innerText = str.charAt(2)
}
oBtns[1].onclick = function() {
    oRes[1].innerText = str.charAt(2) +': '+ str.charCodeAt(2)
}
oBtns[2].onclick = function() {
    oRes[2].innerText = String.fromCharCode(1986)
}

• 位置方法
  a) indexOf()
  从前向后检索字符串，看其是否含有指定字串
  b) lastIndexOf()
  从后向前检索字符串，看其是否含有指定字串

尝试一下

let oBtns = document.querySelectorAll('button')
let oRes = document.querySelectorAll('.res')
var str = '爱我中华';
oBtns[0].onclick = function() {
    if(str.indexOf('华') !== -1){
        oRes[0].innerText = "位置：" + str.indexOf('华') + " 含有华"
    }else {
        oRes[0].innerText = "位置：" + str.indexOf('华') + "不含有华"
    } 
}
oBtns[1].onclick = function() {
    if(str.indexOf('你') !== -1){
        oRes[1].innerText = "位置：" + str.lastIndexOf('你') + "含有你"
    }else {
        oRes[1].innerText = "位置：" + str.lastIndexOf('你') + "不含有你"
    }
}

• 匹配方法
  a) match()
  ■ 功能 找到一个或多个正则表达式的匹配
  ■ 参数 （要进行模式匹配的正则表达式；非正则表达式，将其传递给RegExp（）构造函数，并转换为正则表达式对象）
  ■ 返回值 存放匹配结果的数组1.有全局标记 g 执行全局检索 - 找到 返回数组 （内容：所有匹配的字串；缺陷：没有派生属性，不提供与子表达 式匹配的文本信息，不声明每个匹配字串的位置；弥补：使用RegExp.exec()方法）
  b) search()
  ■ 功能 检索字符串中与正则表达式匹配的字串
  ■ 参数 与match（）相同
  ■ 返回值
  1. 找到 字符串中第一个与正则表达式相匹配的字串的起始位置
  2. 未找到 返回 -1
  c) replace()
  ■ 功能 替换一个与正则表达式匹配的字串
  ■ 参数 （参数1：需要进行替换正则表达式对象或字符串；参数2：替换文本或替换函数）
  ■ 特性 - 如果参数1仅为字符串则只进行一次匹配替换，若替换所有字串则必须制定全局标记g- 如果参数2仅为字符串则可使用特殊字符序列 （$$: 匹配￥； n：匹配第n个捕获组的子字符串 n=0-9；$nn: 匹配第nn个捕获组的子字符串 nn=01-99）
  d) split()
  ■ 功能 根据指定分隔符将字符串分割成多个字串，并返回成数组
  ■ 参数 （必须：指定的分割符；可选：指定数组的长度）

尝试一下

let oBtns = document.querySelectorAll('button')
let oRes = document.querySelectorAll('.res')
var str = '爱我中华';
oBtns[0].onclick = function() {
    oRes[0].innerText = str.match(/华/g)
}
oBtns[1].onclick = function() {
    oRes[1].innerText = "位置："+ str.search(/华/g)
}
oBtns[2].onclick = function() {
    oRes[2].innerText = str.replace('爱我', '我爱')
}
oBtns[3].onclick = function() {
    oRes[3].innerText = str.split('')
}

一个小Demo

let oInput = document.querySelector('input')
let oContent = document.querySelector('.content')
let str = oContent.innerText;
oInput.addEventListener('input',function() {
   let reg = new RegExp(this.value, 'g');
   let res =  str.replace(reg, `<span>${this.value}</span>`)
    oContent.innerHTML = res;
})

操作方法

• 拼接方法 concat()
  ○ 用法 string.concat(value，....)
  ○ 功能 链接字符串
  ○ 参数 要连接到string上的一个或多个值
  ○ 返回值 把所有的参数都链接到字符串string上得到的新字符串
  ○ 特性 功能和 + 号相同，原字符串的值不会改变

尝试一下

let oInput = document.querySelector('input')
let oContent = document.querySelector('.content')
let str = '';
oInput.addEventListener('change',function(e) {
   str = str.concat(this.value)
   oContent.innerHTML = str;
})

• 截取方法
  a) 根据下标截取字符串
  ■ slice（）负值参数，与字符串长度相加
  ■ substring（）负值参数，转换为0
  b) 根据长度截取字串
  ■ substr（） 参数2：返回的字符个数

尝试一下

let oContent = document.querySelector('.content')
let str = '不应当急于求成，应当去熟悉自己的研究对象，锲而不舍，时间会成全一切，凡事开始最难，然而更难的是何以善终。';
oContent.innerHTML = str;
setInterval(function(){
    str = str.replace(str.slice(0,1), '');
    str = str.concat(str.slice(0,1));
    oContent.innerHTML = str;
},220) 

• 空格处理
  ■ trim 清除前置以及后置的空格
  ■ trimLeft 清除前置的空格
  ■ trimRight 清除后置的空格
• 比较方法 localCompare()
  ○ 功能 用本地特定顺序比较两个字符串
  ○ 参数 与原字符串进行比较的字符串
  ○ 返回值 说明比较结果的数字 （负数： 原字符串 < 参数字符串； 0 ：相等；正数：原字符串> 参数字符串）

编码方法

● 字符串常规编码与解码
a. escape（）
b. unescape（）
● URI字符串编码与解码
a. encodeURI（）
b. decodeURI（）
● URI组件编码与解码
a. encodeURIComponent（）
b. decodeURIComponent（）

尝试一下

let oBtns = document.querySelectorAll('button')
let oRes = document.querySelectorAll('.res')
var str = 'https://www.xuexila.com/mingyan/429962.html';
var str02 = '我爱中国'
oBtns[0].onclick = function() {
    oRes[0].innerText = escape(str02)
}
oBtns[1].onclick = function() {
    oRes[1].innerText = unescape(escape(str02))
}
oBtns[2].onclick = function() {
    oRes[2].innerText = encodeURI(str02)
}
oBtns[3].onclick = function() {
    oRes[3].innerText = decodeURI(encodeURI(str02))
}
oBtns[4].onclick = function() {
    oRes[4].innerText = encodeURIComponent(str)
}
oBtns[5].onclick = function() {
    oRes[5].innerText = decodeURIComponent(encodeURIComponent(str))
}

转换方法

● 大小写转换
a. 转为大写 toUpperCase（）； toLocaleUpperCase（）本地
b. 转为小写 toLowerCase（） ；toLocaleLowerCase（）本地

尝试一下

let oBtns = document.querySelectorAll('button')
let oRes = document.querySelectorAll('.res')
var str = 'hello JavaScript';

oBtns[0].onclick = function() {
    oRes[0].innerText = str.toUpperCase()
}
oBtns[1].onclick = function() {
    oRes[1].innerText = str.toLowerCase()
}

Date

● new Date（）方法
● getDate（） 返回月份中的日期值
● getDay （） 返回一周中的日期值
● getFullYear（） 返回4位数的年份
● getHours（） 返回小时
● getMilliseconds（） 返回毫秒数
● getMinutes（） 返回分钟
● getMonth（） 返回月份值
● getSeconds（） 返回秒数
● getTime（） 返回时间对象的毫秒数
● set 同上 用来设置时间
● Date.now（） 返回当前事件，自济源开始后的毫秒数
● Date.parse（）解析一个日期及实践的字符串表示，返回该日期的内部毫秒表示
● Date.UTC （）返回指定的UTC日期及实践的毫秒表示
● decodeURI（） 解码一个URI中的字符
● encodeURI （） 转义一个URI中的字符

尝试写一个小Demo

var spans = document.getElementsByTagName("span");

function getTime(){
  var date = new Date();
  var h = date.getHours() > 10 ? date.getHours(): '0'+ date.getHours();
  var m = date.getMinutes() > 10 ? date.getMinutes(): '0'+ date.getMinutes();
  var s = date.getSeconds() > 10 ? date.getSeconds(): '0'+ date.getSeconds();
  //获取时分秒
  var newDate = [h,m,s];
  for(var i= 0; i<spans.length;i++){
    //插入时间，在文档中输出
    spans[i].innerHTML = newDate[i];
  }
}
getTime();
//开启定时器
setInterval(getTime,1000);