JavaScript高级程序设计 ———— String类型

Posted 2021-03-04 Luckily

String 类型提供了很多方法，用于辅助完成对ECMAScript 中字符串的解析和操作。

1、字符方法

1）charAt()

2）charCodeAt()

3）方括号+数字

<script>
    //charAt()  输出索引号对应的单个字符
    //charCodeAt()   输出索引号对应的单个字符的字符编码
    var str = \'lucky\';
    var result = str.charAt(3);
    console.log(result);   //"k"
    var result1 = str.charCodeAt(3);    
    console.log(result1);   // "107"
    var result3 = str[3];
    console.log(result3);   //"k"
</script>

2、字符串操作方法

1）concat()

2）slice()

3）substring()

4）substr()

<script>
    //concat()   连接一个或多个字符串
    //slice()/substring()/substr()  截取子字符串
    var str = "hello ";
    var str1 = "world";
    var result = str.concat(str1);
    var result1 = str.concat(str1,\'!\');
    console.log(result);   // "hello world"
    console.log(result1);   // "hello world!"
    /*  
    **    slice()、substring()、substr()的2个参数都为正数的情况：
    **    slice(startIndex,endIndex)    取值位置从startIndex开始，一直取到endIndex-1结束
    **    substring(startIndex,endIndex)  取值位置从startIndex开始，一直取到endIndex-1结束
    **    substr(startIndex,number)   取值位置从startIndex开始，一直取到number个之后结束
    */
    var result2 = str1.slice(1,3);  
    var result3 = str1.substring(1,3);
    var result4 = str1.substr(1,3);
    console.log(result2);   //or
    console.log(result3);   //or
    console.log(result4);   //orl
    /* 
    **    当以上方法只有1个参数的情况：
    **    slice(startIndex)/substr(startIndex)/substring(startIndex)            
    **    表示取值从startIndex开始一直取到字符串末尾
    */
    var result5 = str1.slice(1);
    var result6 = str1.substring(1);
    var result7 = str1.substr(1);
    console.log(result5);  // orld
    console.log(result6);  // orld
    console.log(result7);  // orld
    /*  
    **    slice()、substring()、substr()的2个参数存在负数的情况：
    **    slice(startIndex,endIndex)     将负值与字符串的长度相加
    **    substring(startIndex,endIndex)   把所有负值参数都转换为0
    **    substr(startIndex,number)  将负的第一个参数加上字符串的长度，而将负的第二个参数转换为0
    */
    var res1 = str1.slice(-1);   //str1.slice(4)
    var res2 = str1.substring(-1);  //str1.substring(0)
    var res3 = str1.substr(-1);  //str1.substr(4)
    console.log(res1);  // d
    console.log(res2);  // world
    console.log(res3); // d
    var res4 = str1.slice(1,-2);  //str1.slice(1,3)
    var res5 = str1.substring(1,-2); //str1.substring(1,0)
    var res6 = str1.substr(1,-2);  //str1.substr(1,0)
    console.log(res4);  //or
    console.log(res5);  //w
    console.log(res6);  //\'\',没有取到任何字符
</script>

3、字符串位置方法

1）indexOf()

2）lastIndexOf()

<script>
    //indexOf()、lastIndexOf()查找某个字符串是否存在；存在返回第一个被查找到的索引号，若不存在返回-1
    var str = "today is a very nice day!";
    var res1 = str.indexOf(\'y\');
    console.log(res1);  // 4
    var res2 = str.lastIndexOf(\'y\');
    console.log(res2); // 23
</script>

<script>
    //循环输出某个字符下标索引组成的数组
    var str = "today is a very nice day!";
    var positionIndex = str.indexOf(\'y\');
    var indexArr = [];
    while(positionIndex > -1){
        indexArr.push(positionIndex);
        positionIndex = str.indexOf(\'y\',positionIndex + 1);   //从当前索引的下一个索引开始查找
    }
    console.log(indexArr);  //[4, 14, 23]
</script>

 4、trim()方法

1）trim()方法   删除前置及后缀的所有空格

2）trimLeft()、trimRight()  [ps:部分浏览器支持]

trimLeft()  删除字符串开头的所有空格

trimRight()  删除字符串末尾的所有空格

<script>
    //trim()、trimLeft()、trimRight()  
    var str = \'  hello world!  \';
    var result = str.trim();
    var result1 = str.trimLeft();
    var result2 = str.trimRight();
    console.log(result);  // \'hello world!\'
    console.log(result1);  //\'hello world!  \'
    console.log(result2);  // \'  hello world!\'
</script>

5、字符串大小写转换方法

1）toUpperCase()

2）toLowerCase()

3）toLocaleUpperCase()

4）toLocaleLowerCase()

<script>
    //toUpperCase()、toLowerCase()、toLocaleUpperCase()、toLocaleLowerCase()
    var str = \'hello\';
    var res1 = str.toUpperCase();
    var res2 = str.toLocaleUpperCase();
    console.log(res1);  //\'HELLO\'
    console.log(res2); //\'HELLO\'
    var str1 = \'WORLD\';
    var res3 = str1.toLowerCase();
    var res4 = str1.toLocaleLowerCase();
    console.log(res3);  //\'world\'
    console.log(res4);  //\'world\'
</script>

6、字符串的模式匹配方法  match()/search()/replace()

1）match()

<script>
    //match()  参数可以是1个正则表达式或者RegExp对象
    var str = \'establish system of company\';
    var pattern1 = /[a]/;   //定义正则的第1种方式
    var pattern2 = new RegExp(\'[a]\');   //定义正则的第2种方式
    var res = str.match(pattern1);
    console.log(res);  // ["a", index: 3, input: "establish system of company", groups: undefined]
    console.log(res.index);  //3
    var res1 = str.match(pattern2);
    console.log(res1);  // ["a", index: 3, input: "establish system of company", groups: undefined]
    console.log(res1[0]);   // "a"
</script>

 2）search()

<script>
    /*  search()  
    **    参数可以是字符串，也可以是正则表达式
    **    返回匹配到的索引号，若未匹配成功，返回-1
    */
    var str = \'establish system of company\';
    var res1 = str.search(\'li\');
    var res2 = str.search(/co/);
    var res3 = str.search(new RegExp(\'pan\'));
    console.log(res1);  //5
    console.log(res2);  //20
    console.log(res3);  //23
</script>

 3）replace()

<script>
    /*  replace()  
    **    第1个参数可以是字符串，也可以是正则表达式；第2个参数可以是一个字符串或一个函数
    */
    var str = \'establish list\';
    var res1 = str.replace(\'li\',\'LI\');
    var res2 = str.replace(/li/g,\'Love\');
    var res3 = str.replace(new RegExp(\'s\',\'g\'),\'LUCK\');
    console.log(res1);  //estabLIsh list
    console.log(res2);  //estabLovesh Lovest
    console.log(res3);  //eLUCKtabliLUCKh liLUCKt
</script>

 7、localeCompare()

<script>
    /*  localeCompare()
    **    比较2个字符串位置先后顺序
    */
    var str = \'luck\';
    var res1 = str.localeCompare(\'apple\');
    var res2 = str.localeCompare(\'wolf\');
    var res3 = str.localeCompare(\'luck\');
    console.log(res1);   //1
    console.log(res2);  //-1
    console.log(res3);  //0
</script>

8、fromCharCode()

<script>
    /*  fromCharCode()
    **    将字符编码转换为字符String.fromCharCode()
    */
    console.log(String.fromCharCode(\'101\'));  //e
    console.log(String.fromCharCode(\'111\'));  //o
    console.log(String.fromCharCode(\'121\'));  //y
</script>