JavaScript string对象（属性，方法）获取图片后缀案例输入和输出结果转换形式案例

2023-11-07 08:55 由 L_GuoZY 发表于 #前端开发

一、创建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)