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

2023-11-22 本文已影响0人丸子小姐__不懂爱

前言

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);

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

前言

查找方法

尝试一下

尝试一下

尝试一下

一个小Demo

操作方法

尝试一下

尝试一下

编码方法

尝试一下

转换方法

尝试一下

Date

尝试写一个小Demo

猜你喜欢

热点阅读