[JS專題1]----字符串

總結:整理與字符串相關的知識點。
主要有
1.對字符串的查找,如是否有某些字符,字符在哪一個位置,根據位置去查找字符
2.對字符串的刪除,截取咱們想要的字符,也多是刪除咱們不想要的字符
3.對字符串的增長 固定格式的補全 自動補全 重複補全 拼接
4.對字符串的替換,對某些字符的所有替換 或者說僅對第一個出現的字符替換
5.轉換 大小寫的轉換 轉爲碼點 碼點轉字符
6.不一樣類型的轉換;數字與字符串的轉換 數組與字符串的轉換
7.比較 比較大小 比較某些字符出現的位置順序es6

0、字符串的方法大合集

含義 方法 返回值 改變原字符串
查找 indexOf() 位置 no
查找 search() 位置 yes
查找 includes() boolean no
查找 startswith()頭部有? boolean yes
查找 endsWith() 尾部有? boolean yes
截取 substr(start,length) 新字符串 no
截取 substring(start,stop) 新字符串 no
截取 slice(start,stop) 新字符串 no
去空格 trim() ** no
重複次數 repeat(n) 新字符串 no
補全 padStart(length,value) 頭部補全 新字符串 no
補全 padEnd(length,value)尾部補全 新字符串 no
匹配 match() 查找項+位置 no
正則的全匹配 matchAll() 正則 yes
替換 replace() 新字符串 no
轉小寫 toUpperCase() 新字符串 yes
轉小寫 toLowerCase() 新字符串 yes
轉碼點 charCodeAt() 新字符 no
轉碼點 codePointAt() 位置 no
轉字符 charAt() 新字符 no
轉字符 at() 還未實現 位置 no
碼點->字符 String.fromCodePoint() 新字符 /
比較位置順序 localeCompare(a,b) 1/-1/0 no
** normalize() ** no

圖片描述

1.字符串的查找

如是否有某些字符,某個字符的位置是哪裏? 第n 位的字符是什麼正則表達式

1.1 根據位置查找

  1. charAt(n) -----返回字符;只接收位置參數,位置參數過大時,返回空。參數非數字時,返回第一個字符
  2. 可經過str[n]的方式 -----返回字符---位置參數過大時,返回undefined
  3. charCodeAt(n) -----返回碼點,es5
  4. codePointAt(n)-----返回碼點,es6 ,優點,能識別大於oxFFFF的編碼
var s = 'kljlk;juoi'
s.charAt(2) // j
s.charAt('j') // k
s.charAt('15') // ''
s[15] // undefined
s[3] // l
s.charCodeAt(2) //  106
s.codePointAt(2) // 106

1.2 是否有某些字符,根據字符查找

- indexOf()-------返回位置,沒有就返回-1
- lastIndexOf();---返回位置,從後開始查找
- includes():返回布爾值,表示是否找到了參數字符串。第二個參數,表示開始搜索的位置
- startsWith():返回布爾值,表示參數字符串是否在原字符串的頭部。第二個參數,表示開始搜索的位置
- endsWith():返回布爾值,表示參數字符串是否在原字符串的尾部第二個參數,表示開始搜索的位置 
- match()---返回相關的信息--只接受一個參數,要麼正則表達式 要麼RegExp對象
- search()----返回位置,沒有就返回-1---只接受一個參數,要麼正則表達式 要麼RegExp對象
let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

var s1 = 'fdkfdkjldrm '
s1.indexOf('kjl') // 5
s1.lastIndexOf('kjl') // 5
s1.indexOf('fd') // 0
s1.lastIndexOf('fd') // 3
s1.search('fdlp') // -1
s1.search('fd') // 0
s1.search('kjl') // 5
s1.match('fd') // ["fd", index: 0, input: "fdkfdkjldrm ", groups: undefined]
s1.match('f5') // null

2.字符串的增刪改

如下4種方法不會修改字符串自己;json

2.1 刪除

  • 2.1.2截取
    slice(start,stop)
    substring(start,stop)
    substr(start,length)數組

    **共同點:**
      基於字符串建立新字符串,不改變原有字符串
      第二個參數是可選的
      無第二個參數,即字符結尾爲結束位置
      **不一樣點**
      對負數的處理:
      slice()---將負數和字符串長度相加
      substring()----將負數轉爲0
      substr()---將第一個負數和字符串長度相加。第二個負數轉爲0,即不截取

    圖片描述
    圖片描述

2.1.2 刪除空格函數

trim() 刪除字符串中 前置和後置的空格

圖片描述

2.2 增長

2.2.1 複製n遍字符串

repeat(n) --返回一個新字符串,表示將原字符串重複n次。
參數若是是小數,會被取整編碼

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
'na'.repeat(2.9) // "nana"
'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError
參數NaN等同於 0

2.2.2.補全長度

padStart(minlength,string)用於頭部補全,
padEnd(minlength,string)用於尾部補全
用途:es5

  • 提示字符串格式;
  • 爲數值補全指定位數
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'
'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

2.3 - 拼接 concat();

圖片描述

2.4 修改

  • replace();

圖片描述

3.字符串的轉換

3.1 大小寫的轉換

- toLowerCase();-----小寫
- toUpperCase();----變大寫
- toLocaleLowerCase();
- toLocaleUpperCase();

3.2 碼點 --> 字符

根據碼點返回對應的字符spa

  • es5:String.fromCharCode(0x20BB7); 定義在String對象上
  • es6:String.fromCodePoint();定義在字符串的實例對象上。--能識別32位字符。即能識別Unicode編號大於oxFFFF;
String.fromCharCode(100)
"d"
String.fromCodePoint(0x20BB7)
// "?"
String.fromCodePoint(100,100,100)
// ddd

4.不一樣類型的轉換

4.1 string 與 array

array.join(',') ------將數組轉字符串
string.split(',') ---------字符串轉數組3d

4.2 number與string

number --->string(4種)code

1.Number()
2.parseInt()
3.parseFloat()
4.+string-----
var s = '23'
var k = +s
typeof k // number

number---> string(4種)

String(number)--強制轉換
toString(8進制)
toFixed(n)---//數字轉換爲字符串,而且顯示小數點後的指定的位數
number + ''
var s = 123.68
var k= s.tiString(8)
var k0 = s.toFixed(1)
var k1 = String(s)
k // '173.43656'
k0 // '123.7'
k1 // '123.68'

4.3 string 與 object

JSON.parse() ------ json 字符串 轉 json 對象
JSON.stringify() -----json 對象轉 json 字符串

5 .字符串的比較

localeCompare()---比較2個字符串,參數應該在比較的字符串前面,則返回1;後面,則 -1; 等於,則 0;

var s= 'dfhk'
s.localeCompare('fgfg') // -1
s.localeCompare('afgfg') // 1
s.localeCompare('dfhk') // 0
s.localeCompare('df') // 1

6.其餘經常使用的方法

6.1字符串的遍歷器接口

    • 字符串能夠被for...of循環遍歷。

      與es5的比較
      for循環雖能夠遍歷字符串,但不能識別大於oxFFFF的編碼;

    • valueOf()
    • toLocaleString()

    7.變態考題

    1.

    function showCase(value) {
        switch(value) {
        case 'A':
            console.log('Case A');
            break;
        case 'B':
            console.log('Case B');
            break;
        case undefined:
            console.log('undefined');
            break;
        default:
            console.log('Do not know!');
        }
    }
    showCase(new String('A'));
    結果是 ‘'Do not know!’

    2.

    function showCase2(value) {
        switch(value) {
        case 'A':
            console.log('Case A');
            break;
        case 'B':
            console.log('Case B');
            break;
        case undefined:
            console.log('undefined');
            break;
        default:
            console.log('Do not know!');
        }
    }
    showCase2(String('A'));
    
    結果是‘Case A’

    3.

    '5' + 3

    '5' - 3

    // 53 2; because:Strings know about + and will use it, but they are ignorant of - so in that case the strings get converted to numbers.

    4.

    3.toString()
    3..toString()
    3...toString()
    
    // error  '3' error;because:1.1, 1., .1 都是合法的數字. 那麼在解析 3.toString 的時候這個 . 究竟是屬於這個數字仍是函數調用呢? 只能是數字, 由於3.合法啊!
    相關文章
    相關標籤/搜索