JavaScript字符串学习（案例）

浅浅的花香味﹌ 2023-01-16 02:58 126阅读 0赞

JavaScript 字符串是由文本组成的值，可以包含字母、数字、符号、标点符号甚至表情符号。  
作用：JavaScript 字符串用于存储和操作文本。

### javascript字符串 ###

声明字符串只需要加双引号或者单引号

var str = "vans"; 
    console.log(str);//vans

访问字符串中的某个数，也可以用和数组一样的方法：

var str1 = "hello"
    console.log(str1[0]);//h
    
    //可以访问，但是不能修改
    str1[0] = "a";
    console.log(str1);//hello

您可以在字符串中使用引号，只要不和外面的引号相同就得了

var str1 = "let's go";
    console.log(str1);

如何在字符串中使用引号，且和外面的引号相同，那么可以用转义符号来转义""如下：

var str2 = 'let\'s go';
    console.log(str2);

运行结果：  
![在这里插入图片描述][20210423165223985.JPG_pic_center]

###### length属性 ######

length属性可以求出字符串长度

var str = "vans";
    var len = str.length;
    console.log(len);//4

### 常用的方法 ###

###### indexOf() ######

indexof()方法返回字符串中指定文本首次出现的位置（起始位为0）

var str = "audiquattro";
    var aa = str.indexOf("a");
    console.log(aa);//0

寻找最后一次出现的字符

var bb = str.lastIndexOf("a");
    console.log(bb);//6

indexOf可以写第二个参数，第二个参数为开始查找的位置

var ee = str.indexOf("a",5);
    console.log(ee);//6

###### search() ######

search() 方法搜索特定值的字符串，并返回匹配的位置，可以使用正则表达式匹配

var str = "audiquattro";
    var rch = str.search("u");
    console.log(rch);//1

search() 方法无法设置第二个开始位置参数。

var rr = str.search("a",5);
    console.log(rr);//0

index()和search()方法匹配不到字符串里的字符，那么返回-1

var dd = str.indexOf("k");
    console.log(dd);//-1
    
    var rch1 = str.search("z");
    console.log(rch1);//-1

###### slice() ######

slice() 提取字符串的某个部分并在新字符串中返回被提取的部分

var res0 = str.slice(0,4);
    console.log(res0);//audi

如果写一个参数，那么就是从这个索引开始截取，取到结尾，如：

var str = "audiquattro";
    var res = str.slice(4);
    console.log(res);//quattro

如果某个参数为负，则从字符串的结尾开始计数。

var res1 = str.slice(-4);
    console.log(res1);//ttro

###### charAt()/charCodeAt() ######

charAt() 方法返回字符串中指定下标（位置）的字符串

var js = "JavaScript";
    var atjs = js.charAt(0);
    console.log(atjs);//J

charCodeAt() 方法返回字符串中指定索引的字符 unicode编码

var unjs = js.charCodeAt(0);
    console.log(unjs);//74

###### trim() ######

trim() 方法删除字符串两端的空白符

var brand = " champion ";
    var trbr = brand.trim();
    console.log(trbr);//champion

###### replace() ######

replace() 方法用另一个值替换在字符串中指定的值 对大小写敏感

var str = "javascript";
    var rep = str.replace("java","type");
    console.log(rep);//typescript
    //大小写不敏感 /i
    var rep1 = str.replace(/JAVA/i,"type");
    console.log(rep1);//typescript
    //全局匹配 g
    var rep2 = str.replace(/a/g,"A");
    console.log(rep2);//jAvAscript

###### concat() ######

concat() 连接两个或多个字符串

var car = "BMW";
    var car1 = "AUDI";
    var my = "I like ";
    
    var dream = my.concat(car);
    console.log(dream);//I like BMW
    
    var gdream = my.concat(car," and ",car1);
    console.log(gdream);//I like BMW and AUDI

###### toUpperCase()/toLowerCase() ######

toUpperCase() 把字符串转换为大写

var shoes = "vans";
    var upsh = shoes.toUpperCase();
    console.log(upsh);//VANS

toLowerCase() 把字符串转换为小写

var shoes1 = "CONVERSE";
    var losh = shoes1.toLowerCase();
    console.log(losh);//converse

###### split() ######

split() 将字符串转换为数组

var car = "Honda";
    var arr = car.split();
    console.log(arr);//["Honda"]
    console.log(arr.length);//1

如果分隔符是 “”，被返回的数组将是间隔单个字符的数组

var arr1 = car.split("");
    console.log(arr1);//["H", "o", "n", "d", "a"]

如果转入参数这，则会根据该符号来分割字符串

var car = "Honda";
    var arr2 = car.split("-");
    console.log(arr2);//["Honda"]
    
    var hi = "h-e-l-l-o";
    var hiarr = hi.split("-");
    console.log(hiarr);//["h", "e", "l", "l", "o"]

### 案例 ###

###### 封装一个字符串去重的方法 ######

方法一：

方法二（数组去重也可以使用此方法）：

###### 封装一个驼峰式命名的方法 ######

有两个参数，第一个是要转换的单词，第二个是单词与单词之间所用的连接符

function camelCase(str,f) { 
        let arr = str.split(f),
            firstword = arr[0],
            len = arr.length,
            upword = "";
        for(var i = 1;i<len;i++){ 
            upword += arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
        }
        return firstword + upword;
    }
    
    var cc1 = camelCase("my$first$name","$");
    console.log(cc1);//myFirstName
    
    var cc2 = camelCase("my-last-name","-");
    console.log(cc2);//myLastName

[20210423165223985.JPG_pic_center]: /images/20221022/4c8a4e9f9d114e6a8905dbe06a57f163.png