- A+
所属分类：Web前端
一、创建string对象
var strOb = new String("abcefg");
var strOb = String("abcefg");
var strOb = "abcefg";
二、属性
length (字符串长度)
var str = 'hello'; console.log(str.length) // 5三、方法
1、子字符串位置
indexOf(string,[index])
string ： 查找的字符串的内容，必填项
index：开始查找位置，可有可无
返回值：返回值是查找到的子字符串的位置（下标），默认情况下，返回的是第一个被查找到的内容；如果被查找的内容不存在，则返回-1
var str = 'hello'; console.log(str.indexOf('o'));查找 ‘o’没有写位置，意为从第一位开始查找，返回下标 4
lastIndexOf(string,[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));案例：使用slice和定时器，实现内容的输出
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)
