Js字符串-String字符串对象方法

墨蓝 2023-02-21 06:24 24阅读 0赞

# Ⅰ- 壹 -String字符串类型 #

## 一 String的创建方式 ##

*  字面量创建方式，存在栈中
 *  实例化创建方式，（new）存在栈中
 *  构造函数创建方式，会创建一个字符型对象，存在堆中
 *  字符串的length 获取字符串的长度。只是可读的 不能修改 只能获取
 *  str.charAt(1) 等同于 str\[1\]

// 字面量创建方式
    var str="abc",str1='abd',str2=`abc`;
    
    //实例化创建方式
    var str4=String('abc');//存在栈中
    
    //构造函数创建方式
    var str5=new String('abc');//字符型对象，存在堆中
    console.log(str4===str5);//false
    console.log(str4==str5);//true

## 二 基本包装类型 ##

**为了方便操作基本数据类型, JavaScript还提供了三个特殊的引用类型: String、Number和Boolean。  
基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。**

1.  对象才有属性和方法 复杂数据类型才有属性和方法
2.  简单数据类型为什么会有lenght 属性呢?
3.  基本包装类型: 就是把简单数据类型包装成为了复杂数据类型

// 基本包装类型
    varstr='andy';
    console. log(str .length);
    //对象才有属性和方法 复杂数据类型才有属性和方法
    //简单数据类型为什么会有lenght 属性呢?
    //基本包装类型: 就是把简单数据类型包装成为了复杂数据类型
    // (1) 把简单数据类型包装为复杂数据类型
    var temp=new String('andy' );
    // (2) 把临时变量的值给str
    str = temp;
    // (3) 销毁这个临时变量
    temp=nul1:

## 三 String字符串的不可变 ##

**指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一一个内存空间。**

1.  当重新给str赋值的时候，常量’abc’不会被修改，依然在内存中
2.  重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
3.  由于字符串的不可变，在大量拼接字符串的时候会有效率问题;

var str = 'abc' ;
    str = 'hello';
    //当重新给str赋值的时候，常量'abc'不会被修改，依然在内存中
    //重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
    //由于字符串的不可变，在大量拼接字符串的时候会有效率问题;
    var str= ‘’;
    for(vari=0;i<100000;i++){ 
    str += i;
    }
    console.log(str); //这个结果需要花费大量时间来显示，因为需要不断的开辟新的空间

# Ⅱ - 贰 -String字符串对象方法 #

**length获取字符串的长度**

let myString = "hello kitty";
    myString.length;  // 输出11

## 一 根据字符返回位置 ##

**字符串所有的方法,都不会修改字符串本身(字符串是不可变的) ,操作完成会返回一个新的字符串。**

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>indexOf（要查找的字符，开始的位置）</td> 
   <td>返回指定内容在元字符串中的位置， 如果找不到就返回-1, 开始的位置是index索引号</td> 
  </tr> 
  <tr> 
   <td>lastindexOf()</td> 
   <td>从后往前找，只找第一个匹配</td> 
  </tr> 
 </tbody> 
</table>

#### 1 indexOf ####

**作用**: 通过字符, 查找到对应的索引返回  
**语法**:  
字符串.indexOf(你要查找的字符)  
字符串.indexOf(你要查找的字符, 从哪个索引开始查找)  
**返回值**: 一个数字  
如果有这个字符, 那么就返回找到的第一个字符位置的索引  
如果没有这个字符, 那么就返回 -1

let myString = "hello kitty";
    myString.indexOf('kitty');    // 6
    myString.indexOf('Hello');    //-1
    myString.indexOf('hello');    //0
    myString.indexOf('hello',3);    //-1
    //
    var str = 'hello world';
    // 当你找一个多个字母的字符的时候, 会找到匹配的第一个字母的位置返回
    var res = str.indexOf('world');
    console.log(res);//结果为 6

#### 2 lastIndexOf() ####

**作用**: 通过字符, 查找到对应的索引返回, 从后往前查找  
**语法**:  
字符串.lastIndexOf(你要查找的字符)  
字符串.lastIndexOf(你要查找的字符, 从哪个索引开始查找)  
**返回值**: 一个数字  
如果有这个字符, 那么就返回找到的第一个字符位置的索引  
如果没有这个字符, 那么就返回 -1

let myString = "hello kitty";\
    myString.lastIndexOf('hello')    // 0
    myString.lastIndexOf('world')    // -1
    myString.lastIndexOf('kitty')    // 6
    myString.lastIndexOf('kitty',3)    // -1
    //
    var str = 'hello world';
    //从右往左找
    var res = str.lastIndexOf('l');
    console.log(res);//结果为 9

## 二 根据位置返回字符 ##

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>说明</th> 
   <th>使用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>charAt(index)</td> 
   <td>返回指定位置的字符（index字符串的索引号）</td> 
   <td>str.charAt(0)</td> 
  </tr> 
  <tr> 
   <td>charCodeAt(index)</td> 
   <td>获取指定位置处字符的ASCII码（index索引号）</td> 
   <td>str.charCodeAt(0)</td> 
  </tr> 
  <tr> 
   <td>str[index]</td> 
   <td>获取指定位置处字符</td> 
   <td>HTML5.IE8.和charAt（）等效</td> 
  </tr> 
 </tbody> 
</table>

#### 1 charAt() ####

**char**: 字符, 表示一个字符  
**at**: 在哪  
**作用**: 根据索引找到对应的字符返回  
**语法**:字符串.charAt(索引)  
**返回值**: 对应索引位置的字符  
如果有对应索引, 那么得到的就是对应索引位置的字符  
如果没有对应索引, 那么得到的是 空字符串

var str = 'hello world';
    var res = str.charAt(8);
    console.log(res);//结果为 r ,空格也占索引位置

#### 2 charCodeAt()和String.fromCharCode() ####

charCodeAt()  
**作用**: 根据索引找到对应的字符, 返回字符的编码  
**语法**:字符串.charCodeAt(索引)  
**返回值**: 对应索引位置的字符编码 UTF-8 编码

String.fromCharCode()  
**作用**: 根据对应的字符, 返回Unicode编码对应的值  
**语法**:String.fromCharCode(转换的Unicode码)  
**返回值**: 对应索引位置的字符编码 UTF-8 编码

var str = '你好 世界';
    // res 获取的是 你 这个汉字的编码
    var res = str.charCodeAt(1);
    console.log(res);//结果为 22909 是这个汉字的编码
    
    
    var rek = String.fromCharCode(res); //编码转换为字符串
    console.log(rek)//打印结果为 好

## 三 字符串操作方法(重点) ##

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>concat(str1,str2,str3…)</td> 
   <td>concat()方法用于连接两个或多个字符串。拼接字符串,等效于+, +更常用</td> 
  </tr> 
  <tr> 
   <td>substr(start,length)</td> 
   <td>从start位置开始(索引号)，length 取的个数重点记住这个</td> 
  </tr> 
  <tr> 
   <td>substring(start, end)</td> 
   <td>从start位置开始，截取到end位置，end取不到基本和slice 相同但是不接受负值</td> 
  </tr> 
  <tr> 
   <td>replace()</td> 
   <td>方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。</td> 
  </tr> 
  <tr> 
   <td>match()</td> 
   <td>方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。以数组表示</td> 
  </tr> 
  <tr> 
   <td>search()</td> 
   <td>用于检索字符串中指定的子字符串的位置</td> 
  </tr> 
  <tr> 
   <td>toUpperCase()</td> 
   <td>方法用于把字符串转换为大写。</td> 
  </tr> 
  <tr> 
   <td>toLowerCase()</td> 
   <td>方法用于把字符串转换为小写。</td> 
  </tr> 
  <tr> 
   <td>slice(start, end)</td> 
   <td>从start位置开始，截取到end位置, end取不到(他们俩都是索引号)</td> 
  </tr> 
  <tr> 
   <td>split()</td> 
   <td>切割字符串 返回切割之后的一个数组 使用于 对象 方法join（）数组转换为字符 相反</td> 
  </tr> 
 </tbody> 
</table>

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

**作用**: 拼接字符串  
**语法**:字符串.concat(要拼接的字符串1, 要拼接的字符串2, …)  
**返回值**:一个拼接好的字符串  
作用和 加号(+) 是一模一样的

let myString = "Hello kitty";
     
    //concat()
    let str = "aabbcc"
    let str2 = " ccddeeff"
    myString.concat(str)    // "Hello kittyaabbcc"
    myString.concat(str,str2)    // "Hello kittyaabbcc ccddeeff"
    //
    var str = 'hello world';
    var res = str.concat(' 你好 世界');
    console.log(res);//结果为 hello world 你好 世界

#### 2 substring() 和substr() ####

参数都不支持负数  
**subbstring()**  
**作用**: 从字符串里面提取出一些内容  
**语法**:字符串.substring(开始索引, 结束索引) - 包头不包尾 第二个参数不写, 默认到末尾  
**返回值**: 一个新的字符串,从原先字符串里面提取出来的内容

var str2 = 'hello world';
    // 从索引 1 开始, 到索引 7, 不包含索引 7
    var res2 = str2.substring(1, 7);
    console.log(res2);//结果为 ello w

**substr()**

**作用**: 从字符串里面提取出一些内容  
**语法**:字符串.substr(开始的索引, 多少个)  
第二个参数不写, 默认是按照到字符串末尾计算  
**返回值**: 一个新的字符串,从原先字符串里面提取出来的内容

var str = 'hello world';
    // 从索引 1 开始, 向后数 7 个, 提取出来
    var res = str.substr(1, 7);
    console.log(res);//结果为 ello wo

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

**作用**: 按照你的需求, 切割字符串  
**语法**:字符串.split(‘你要切割的字符’)  
参数你写什么就按照什么给你切割  
参数你要是写一个字符串里面没有的字符, 那么给你切割出一个整个的字符串  
参数要是不写, 也是切割一个整个的字符串  
参数你要是写一个 空字符串(""), 会一位一位给你切割  
只能从后向前选  
**返回值**: 是一个 数组  
按照你的规则切割好每一部分, 都放到数组里面

let myString = "Hello kitty";
    myString.split("");    // ["H", "e", "l", "l", "o", " ", "k", "i", "t", "t", "y"]
    myString.split(" ");    // ["Hello", "kitty"]
    myString.split(" ")[0];//Hello 字符串 获取下标为零的数据
     
    let str2 = "23:34:56:78";
    str2.split(":",3)     // ["23", "34", "56"]
     
    let str3 = "How,are,you,doing,today?"
    str3.split(",")    // ["How", "are", "you", "doing", "today?"]
    
    var str = '2020-05-20';
    // 用 - 把字符串分开, 每一段都作为一个数据放在数组里面
    var res = str.split('-');
    console.log(res);//结果为 ["2020", "05", "20"]

#### 4 replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。 ####

let myString = "Hello kitty";
    myString.replace(/kitty/,"world")    // "Hello world"
     
    let name = "Doe, John";
    name.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1");    // "John Doe"

#### 5 match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。 ####

let myString = "hello kitty";
    myString.match("hello");    //hello
    myString.match("Hello");    //null
     
    let str = "2 plus 3 equal 5"
    str.match(/\d+/g)    //["2", "3", "5"]

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

slice 和数组的slice等同

**作用**: 从字符串里面提取一部分数据  
**语法**:  
字符串.slice(开始索引, 结束索引) - 包前不包后  
字符串.slice(开始索引, 负整数)  
当你写负整数的时候, 表示 字符串.length + 负整数  
**返回值**: 一个字符串,从原始字符串里面提取出来的一部分

var str = 'abcdefghijklmn';
    // 提取 str 字符串中索引 1 到索引 10 的字符, 不包含索引 10
    var res1 = str.slice(1, 10);
    // 你写 -3 等价于 str.length + -3 === 11
    var res2 = str.slice(1, -3);
    var res3 = str.slice(1, 11);
    console.log(res1);//结果为 bcdefghij
    console.log(res2);//结果为 bcdefghijk
    console.log(res3);//结果为 bcdefghijk

#### 7 toUpperCase() 、toLowerCase() ####

**toUpperCase() 方法用于把字符串转换为大写。**  
**作用**: 把字符串里面所有的小写字母转换成大写字母  
**语法**:字符串.toUpperCase()  
**返回值**: 就是转换好的字符串

var str2 = 'abcdefg';
    var res2 = str2.toUpperCase();
    console.log(res2);//结果为 ABCDEFG

**toLowerCase() 方法用于把字符串转换为小写。**  
**作用**: 把字符串里面所有的大写字母转换成小写字母  
**语法**:字符串.toLowerCase()  
**返回值**: 就是转换好的字符串

var str = 'ABCDEFG';
    var res = str.toLowerCase();
    console.log(res);//结果为 abcdefg

## 四 案例 ##

*  split方法可以将字符串转换为数组，便可以使用数组的方法
 *  反之 join 也是可以转换为字符串也是可以使用 字符串的方法

#### 1 url截取 ####

var url="https://detail.tmall.com/item.htm?id=570063940353&ali_refid=a3_430406_1007:116401153:J:157145175_0_1069023083
    
      var obj= getURLPram(url);
          console.log(obj);

#### 2 字符串翻转 ####

var str="abcdef";
        // 转换成数组，然后反转，然后再用""连接
     str=str.split("").reverse().join("");
     console.log(str);