【JavaScript】字符串对象概述及常用方法详解

【JavaScript】字符串对象概述及常用方法详解

一. 字符串的创建

(1) 字面量方式创建

• 单引号
• 双引号
• 反引号 模板字符串
  1. 可以直接书写回车
  2. 可以直接放置变量

(2) 内置构造函数方式创建

• 语法：

  var 变量名 = new String('内容');
  

二. 字符串的基本操作

(1) length属性

表示字符串的长度，该字符串由多少字符组成。

是一个 只读 属性

var str = 'Today is sun day';
console.log(str.length); // 16

(2) 索引属性

var str = 'Today is sun day';
console.log(str[2]); // 2
console.log(str[100]); // undefined

(3) 遍历

var str = 'Today is sun day';
for (var i = 0; i < str.length; i++) {
    console.log(str[i]);
}

三. 字符串常见方法

(1) charAt()

charAt() 方法从一个字符串中返回指定的字符。

语法：

str.charAt(index)

参数：index一个介于 0 和字符串长度减 1 之间的整数。(0~length-1) 如果没有提供索引，charAt() 将使用 0。

描述：字符串中的字符从左向右索引，第一个字符的索引值为 0，最后一个字符（假设该字符位于字符串 stringName 中）的索引值为 stringName.length - 1。如果指定的 index 值超出了该范围，则返回一个空字符串。

var str = 'hello';
console.log(str.charAt()); // h
console.log(str.charAt(4)); // o
console.log(str.charAt(10)); // 空字符串

(2) charCodeAt()

charCodeAt() 方法返回 0 到 65535 之间的整数，表示给定索引处的 UTF-16 代码单元

语法：

str.charCodeAt(index)

参数：index一个大于等于 0，小于字符串长度的整数。如果不是一个数值，则默认为 0。

返回值：指定 index 处字符的 UTF-16 代码单元值的一个数字；如果 index 超出范围，charCodeAt() 返回NaN。

var str = 'hello';
console.log(str.charCodeAt()); // 104
console.log(str.charCodeAt(4)); // 111
console.log(str.charCodeAt(10)); // NaN

(3) toUpperCase()

toUpperCase() 方法将调用该方法的字符串转为大写形式并返回（如果调用该方法的值不是字符串类型会被强制转换）。

语法：

str.toUpperCase()

返回值：一个新的字符串，表示转换为大写的调用字符串。

描述：toUpperCase() 返回转为大写形式的字符串。此方法不会影响原字符串本身的值，因为 JavaScript 中字符串的值是不可改变的。

var str = 'hello';
console.log(str.toUpperCase()); // HELLO

(4) toLowerCase()

toLowerCase() 会将调用该方法的字符串值转为小写形式，并返回。

语法：

str.toLowerCase()

返回值：一个新的字符串，表示转换为小写的调用字符串。

描述：toLowerCase 会将调用该方法的字符串值转为小写形式，并返回。toLowerCase 不会影响字符串本身的值。

(5) substr()

注：此方法官方没有严格被废弃，可以使用 substring() 替代它。

substr() 方法返回一个字符串中从指定位置开始到指定字符数的字符。

语法：

str.substr(start[, length])

返回值 ：截取后的字符串

var str = "2022-12-28";
console.log(str.substr(0, 7)); // 2022-12

(6) substring()

substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集，或从开始索引直到字符串的末尾的一个子集。

特点：包括开始索引，不包括结束索引。

参数：

indexStart

需要截取的第一个字符的索引，该索引位置的字符作为返回的字符串的首字母。

indexEnd

可选。一个 0 到字符串长度之间的整数，以该数字为索引的字符不包含在截取的字符串内。

返回值：包含给定字符串的指定部分的新字符串。

var str = "abcdefg";
console.log(str.substring(0, 4));

(7) slice()

slice() 方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串。

语法：

str.slice(beginIndex[, endIndex])

参数：

beginIndex

从该索引（以 0 为基数）处开始提取原字符串中的字符。如果值为负数，会被当做 strLength + beginIndex 看待，这里的strLength 是字符串的长度。

endIndex

可选。在该索引（以 0 为基数）处结束提取字符串。如果省略该参数，slice() 会一直提取到字符串末尾。如果该参数为负数，则被看作是 strLength + endIndex，这里的 strLength 就是字符串的长度。

返回值：返回一个从原字符串中提取出来的新字符串

特点：包含开始索引，不包括结束索引，可以为负值。

var str = 'hello';      
console.log(str.slice(2, 4)); // ll
console.log(str.slice(1, -1)); // ell

(8) split()

split() 方法使用指定的分隔符字符串将一个String对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置。

语法：

str.split([separator[, limit]])

返回值：返回源字符串以分隔符出现位置分隔而成的一个 Array。

var str = "2022-12-28";
console.log(str.split("-"));
console.log(str.split("")); // 经典用法 把每一位拆开

(9) concat()

concat() 方法将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回。

语法：

str.concat(str2, [, ...strN])

参数：str2 [, …strN]需要连接到 str 的字符串。

返回值：一个新的字符串，包含参数所提供的连接字符串。

var str = 'hello';
console.log(str.concat('world')); // helloworld

(10) indexOf()

indexOf() 方法，给定一个参数：要搜索的子字符串，搜索整个调用字符串，并返回指定子字符串第一次出现的索引。给定第二个参数：一个数字，该方法将返回指定子字符串在大于或等于指定数字的索引处的第一次出现。

语法：

indexOf(查找的字符)
indexOf(查找的字符, 开始的索引)

返回值：查找的字符串 searchValue 的第一次出现的索引，如果没有找到，则返回 -1。

var str = 'helloworld';
console.log(str.indexOf('ll')); // 2
console.log(str.indexOf('o')); // 4
console.log(str.indexOf('a')); // -1

(11) includes()

includes() 方法执行区分大小写的搜索，以确定是否可以在另一个字符串中找到一个字符串，并根据情况返回 true 或 false。

语法：

includes(searchString)
includes(searchString, position)

参数：

searchString

要在 str 中搜索的字符串。不能是正则表达式。

position 可选

在字符串中开始搜索 searchString 的位置。（默认为 0。）

返回值：如果当前字符串包含被搜寻的字符串，就返回 true，否则返回 false。

var str = 'helloworld';
console.log(str.includes('ll')); // true
console.log(str.includes('o')); // true
console.log(str.includes('a')); // false

(12) trim()

trim() 方法从字符串的两端清除空格，返回一个新的字符串，而不修改原始字符串。

语法：str.trim()

返回值：

一个表示 str 去掉了开头和结尾的空白字符后的新字符串。

如果 str 的开头和结尾都没有空白字符，仍然会返回一个新字符串（本质上是 str 的副本），而不会抛出异常。

var str = `  
                hao  de
        `
console.log(str); //   
//      hao  de
//
console.log(str.trim()); // hao  de

(13) replace()

语法：字符串.replace(换下字符, 换上字符)

作用 ：替换字符串内容

注：一次只能换一个

返回值：一个部分或全部匹配由替代模式所取代的新的字符串。

var str = '美好的生活，从写代码开始';
console.log(str.replace('写代码', '一日三餐')); // 美好的生活，从一日三餐开始

四. 案例

案例一：反转字符串

方法1：

var origin = "abcde";  
var str = "";
for (var i = 0; i < origin.length; i++) {
    str = origin[i] + str;
}
console.log(str); // edcba

方法2：

var origin = "abcde";
var r1 = origin.split("");
var r2 = r1.reverse();
var r3 = r2.join("");
var res = origin.split("").reverse().join("");
console.log(res); // edcba

案例二：连字符转驼峰

get-element-by-class-name ==> getElementByClassName

var str = "get-element-by-class-name";
var arr = str.split("-");
for (var i = 1; i < arr.length; i++) {
    arr[i] = arr[i].substr(0, 1).toUpperCase() + arr[i].slice(1);
}
str = arr.join("");
console.log(str); // getElementByClassName

案例三：敏感词变为*

1. 改变一种敏感词

   var str = "as小明bdd小明adf小明asdfa小明asdfasdf ";
   var s = "小明";
   str = str.split(s).join("**");
   console.log(str); // as**bdd**adf**asdfa**asdfasdf
   

2. 批量替换敏感词

   var str = "as小明bdd小明adf小明asdfa小明asdfasdf ";
   var s = ["小明", "a"];
   s.forEach(function (item) {
       str = str.split(item).join("**");
   });
   console.log(str); // **s**bdd****df****sdf******sdf**sdf 
   

案例四：统计字符串中每一个字符出现的次数

var str = "aaaaabbbbcccdddabacdbdeeedfad";
var obj = {};
for (var i = 0; i < str.length; i++) {
    var item = str[i]; // 每一个字符
    obj[item] ? obj[item]++ : (obj[item] = 1);
}
console.log(obj); // {a: 8, b: 6, c: 4, d: 7, e: 3, f: 1}