前言
string和date的學習更多的是方法的學習挡篓，搗鼓了一晚上败匹，終究也是把筆記做完了先改，學習真的是需要通過大量的練習來融會貫通
查找方法
- 字符方法
a) charAt()
■ 功能 返回字符串中第n個字符
■ 參數 超出范圍返回空字符串
■ 返回值 string中第n個字符的實際值
b) charCodeAt()
■ 功能 返回字符中第n個字符的代碼
■ 參數 超出范圍返回NaN
■ 返回值 string中第n個字符的unicode編碼
c) fromCharCode()
■ 功能 根據字符編碼創(chuàng)建字符串
■ 參數 0個或多個整數毁欣，代表字符的unicode編碼
■ 返回值 由指定編碼字符組成的字符串
■ 特性 靜態(tài)方法，實為構造函數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 執(zhí)行全局檢索 - 找到 返回數組 （內容：所有匹配的字串塞关；缺陷：沒有派生屬性，不提供與子表達 式匹配的文本信息子巾，不聲明每個匹配字串的位置帆赢；彌補：使用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 ：相等谣沸；正數：原字符串> 參數字符串）
編碼方法
● 字符串常規(guī)編碼與解碼
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);
