一、創建string對象 var strOb = new String("abcefg"); var strOb = String("abcefg"); var strOb = "abcefg"; 二、屬性 length (字元串長度) var str = 'hello'; console.log( ...
一、創建string對象
var strOb = String("abcefg");
var strOb = "abcefg";
二、屬性
length (字元串長度)
var str = 'hello';
console.log(str.length) // 5三、方法
1、子字元串位置
[index])
index：開始查找位置，可有可無
返回值：返回值是查找到的子字元串的位置（下標），預設情況下，返回的是第一個被查找到的內容；如果被查找的內容不存在，則返回-1
var str = 'hello';
console.log(str.indexOf('o'));
[index])
console.log(str.lastIndexOf('o',4));返回子字元串abc在字元串中最後一次出現的位置
案例：查找 afgdtywgbfnjekagrn 字元串中有多少次 g var str = new String('afgdtywgbfnjekagrn');
var index = str.indexOf('g'); // 2
// 統計次數
var num = 0;
while(index !== -1){ // 查找
num++;
index = str.indexOf('g',index + 1);
}
console.log('g一共出現了'+num+'次');// 封裝函數 - 查找子字元串出現的次數
function counts(str,cStr){
var index = str.indexOf(cStr);
var num = 0; // 出現的次數
while(index != -1){
num++; // 每出現一次，次數+1
index = str.indexOf(cStr,index+1);
}
return num;
}
var n = counts('38qhdahwdqjk24hjoiyowuierfy8','o');
alert('O一共出現了'+n+'次');2、slice(start,end) 獲取字元串的某個部分
start 表示開始位置，從0開始到正無窮
end 表示結束位置，可以為正值，也可以為負值
var str = 'hello wolrd';
console.log(str.slice(5,11));
console.log(str.slice(0,-5)); var str = '我的名字叫張三，我今年十三歲了,遺的麽到蒲子極為言舟失舟天於國，汪善欲對一和德整終國不是，公哉秦不孔啦吞我丈可疇弟是之他夾，厄與活。';
var oBox = document.querySelector('#box');
var i = 0;
function show(){
if(i<str.length){
oBox.innerHTML = str.substr(0,i++) //方法三
// oBox.innerHTML += str.slice(i,++i); // 方法一
//oBox.innerHTML += str.charAt(i++); // 方法二
setTimeout(show,100);
}
}
show();3、截取
substr(起始位置，截取長度) substring和splice效果方法一致 var str = 'hello wolrd';
console.log(str.substr(0,str.length));案例：判斷圖片是什麼類型； 照片的格式必須是 png/jpg txt
獲取文件名的尾碼 - 尾碼名開始的下標 - lastIndexOf / substr <div id="box"></div>
<input type="file" name="" id="files">
<button onclick="getSuffix()">提交</button> function getSuffix(){
var file = document.querySelector('#files');
var pic = file.value;// 圖片的路徑
// var pic = '.././images/banner/one.txt';
var suffix = pic.substr(pic.lastIndexOf('.')+1);
if(suffix=='png'||suffix=='pneg'||suffix=='jpg'||suffix=='jpeg'){
alert('圖片格式正確');
}else{
alert('格式不正確！');
}
}四、替換 replace()
var str='My name is apple. So I like to eat apple very much!';
//單個替換
console.log(str.replace('apple','banner'));
//全部替換
console.log(str.replace(/apple/g,'banner'));/apple/g 正則表達式，意為全局
// 將所有的數字替換為 空格
// var str2 = '張三1李四2王五3馬六';
console.log(str2.replace(/[0-9]/g,' '));
// 將所有的小寫字母替換為空格
// var str2 = '張三w李四f王五n馬六';
console.log(str2.replace(/[a-z]/g,' '));
// 將所有的字母 替換為 空格【不區分大小寫】
// var str2 = '張三w李四F王五n馬六';
console.log(str2.replace(/[a-zA-Z]/g ,' '));
console.log(str2.replace(/[a-z]/ig , ' '));五、獲取指定位置的字元
charAt(n) 預設為第一個字元n 表示的是下標，範圍是 0-正無窮，不能使用負值 var str1 = 'helloworld';
console.log(str1.charAt(5));
//獲取指定字元的ASCII編碼 str.charCodeAt()
console.log(str1.charCodeAt(0));
var num = 97
console.log(String.fromCharCode(num))
六、轉換大小寫toLowerCase() toUpperCase()
案例：驗證碼登錄
<input type="text " id="inp"><span>tR4wC</span>
<button id="btn">提交</button> //1.找到按鈕
var oBtn = document.querySelector('#btn');
//3.獲取input裡面內容
var oInp = document.querySelector('#inp');
//4.獲取span裡面的內容
var oSpan = document.querySelector('span');
//2.添加點擊事件
oBtn.onclick = function(){
//5.將input框裡面的值轉為大寫
var inp = oInp.value.toUpperCase();
//6.將span框裡面的值轉為大寫
var yanzheng = oSpan.innerHTML.toUpperCase();
if(inp==yanzheng){
alert('驗證成功');
}else{
alert('驗證失敗');
}
}
案例：輸入字母自動轉為大寫
var oInp = document.querySelector('#inp');
oInp.onkeyup = function(){
inp.value = oInp.value.toUpperCase()
console.log(oInp.value.toUpperCase());
}七、將字元串分割為數組,split(分割符,\[返回數組的最大長度])
var str = 'I am student my name is jack';
console.log(str.split()); //將整個字元串分割為一個整體
// console.log(str.split(' ')); //按照空格進行分割
// console.log(str.split('')); //將字元串中的每個字元都進行分割
// var str1 = '張三*20211203*10';
// console.log(str1.split('*'));//按數字進行分組
var str1 = "jack1Rose2Box3Tom4Jerry";
console.log(str1.split(/[0-9]/));
var str1 = "張三t裡斯r王五p馬六";
console.log(str1.split(/[a-z]/));
八、 bold() 加粗 italics() 斜體 strike() 刪除 fontcolor('#f00') 字元串顏色 fontsize(1-7) 字元串大小 sup() 上標標簽 sub() 下標標簽
//5.顯示字元串效果
var str = 'hello world';
document.write(str.bold().fontcolor('#f00').italics().fontsize(7).link('https://www.baidu.com'));
九、獲取圖片尾碼案例
function getimgname (filename){
return filename.split('.').pop();
}
console.log(getimgname('dhaiwdiw.efdwefd.fwfwe.png'));十、 輸入和輸出結果轉換形式案例
var resultStr ="Hello*Books*world*hello";
function strChange (){
//1.將字元串按照*分割，分割成數組
var arr = resultStr.split('*')
//2.遍歷所有首字母
for(var i=0;i<arr.length;i++){
//3.第一個字母轉為小寫，遍歷出來的第一位，replace變換成剛纔轉為字母小寫
// console.log(arr[i][0].toLowerCase());
//4.用轉換好的內容替換原來的內容
var newArr = arr[i].replace(arr[i][0],arr[i][0].toLowerCase())
arr[i] = newArr;
}
//將數組使用join轉換成想要的形式字元串
console.log(arr.join('-')) // 返回 “hello-books-world-world”
}
strChange(resultStr)
