js系列之詳解字符串

前言

javaScript 字符串用於存儲和處理文本，幾乎被所有的編程語言所實現（然而c、c++沒有提供）。多數開發者幾乎每天都在和字符串打交道，語言內置的String模塊，極大地提升了開發者的效率。本文對js字符串常用的方法進行了整理

字符串屬性

屬性	描述
constructor	返回創建字符串屬性函數
length	返回字符串的長度
prototype	允許您向對象添加屬性和方法

字符串方法

charAt（）

返回在指定位置的字符

例子1：

返回字符串中的第三個字符

var str = "HELLO WORLD";
var n = str.charAt(2)
console.log(n);

運行結果

例子2：

返回字符串中的最後一個字符

var str = "HELLO WORLD";
var n = str.charAt(str.length-1);
console.log(n);

運行結果

charCodeAt（）

返回在指定的位置的字符的Unicode編碼

例子1：

返回字符串第一個字符的 Unicode 編碼

var str = "HELLO WORLD";
var n = str.charCodeAt(0);
console.log(n);

運行結果

例子2：

返回字符串中最後一個字符的 Unicode 編碼

var str = "HELLO WORLD";
var n = str.charCodeAt(str.length-1);
console.log(n);

運行結果

concat（）

連接兩個或更多字符串，並返回新的字符串

例子1：

連接兩個字符串

var str1 = "Hello ";
var str2 = "world!";
var n = str1.concat(str2);
console.log(n);

運行結果

例子2：

連接3個字符串

var str1="Hello ";
var str2="world!";
var str3=" Have a nice day!";
var n = str1.concat(str2,str3);
console.log(n);

運行結果

fromCharCode（）

將Unicode編碼轉爲字符

例子1：

將 Unicode 編碼轉爲一個字符

var n = String.fromCharCode(65);
console.log(n);

運行結果

例子2：

將 Unicode 編碼轉換爲一個字符串

var n = String.fromCharCode(72,69,76,76,79);
console.log(n);

運行結果

indexOf（）

返回某個指定的字符串值在字符串中首次出現的位置

例子1：

查找字符串 “welcome”

var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");
console.log(n);

運行結果

例子2：

在字符串查找字符 “e” 第一次出現的位置

var str="Hello world, welcome to the universe.";
var n=str.indexOf("e");
console.log(n);

運行結果

例子3：

在字符串第五個位置開始查找字符 “e” 第一次出現的位置

var str="Hello world, welcome to the universe.";
var n=str.indexOf("e",5);
console.log(n);

運行結果

includes （）

查找字符串中是否包含指定的子字符串

例子1：

查找字符串是否包含 “world”

var str = "Hello world, welcome to the Runoob。";
var n = str.includes("world");
console.log(n);

運行結果

例子2：

從第 12 個索引位置開始查找字符串

var str = "Hello world, welcome to the Runoob.";
var n = str.includes("world", 12);
console.log(n);

運行結果

lastIndexOf （）

從後向前搜索字符串，並從起始位置（0）開始計算返回字符串最後出現的位置

例子1：

查找字符串 “runoob” 最後出現的位置

var str="I am from runoob，welcome to runoob site.";
var n=str.lastIndexOf("runoob");
console.log(n);

運行結果

例子2：

從第 20 個字符開始查找字符串 “runoob” 最後出現的位置

var str="I am from runoob，welcome to runoob site.";
var n=str.lastIndexOf("runoob", 20);
console.log(n);

運行結果

match （）

查找找到一個或多個正則表達式的匹配

例子1：

在字符串中查找 “ain”

var str="The rain in SPAIN stays mainly in the plain";
var n=str.match(/ain/g);
console.log(n);

運行結果

例子2：

全局查找字符串 “ain”，且不區分大小寫

var str="The rain in SPAIN stays mainly in the plain";
var n=str.match(/ain/gi);
console.log(n);

運行結果

repeat （）

複製字符串指定次數，並將它們連接在一起返回

例子1：

複製字符串 “Runoob” 兩次

var str = "Runoob";
console.log(str.repeat(2));

運行結果

replace （）

在字符串中查找匹配的子串，並替換與正則表達式匹配的子串

例子1：

在本例中，我們將執行一次替換，當第一個 “Microsoft” 被找到，它就被替換爲 “Runoob”

var str="Visit Microsoft! Visit Microsoft!";
var n=str.replace("Microsoft","Runoob");
console.log(n);

運行結果

例子2：

執行一個全局替換

var str="Mr Blue has a blue house and a blue car";
var n=str.replace(/blue/g,"red");
console.log(n);

運行結果

例子3：

執行一個全局替換, 忽略大小寫

var str="Mr Blue has a blue house and a blue car";
var n=str.replace(/blue/gi, "red");
console.log(n);

運行結果

search （）

查找與正則表達式相匹配的值

例子1：

查找 “Runoob”

var str="Visit Runoob!";
var n=str.search("Runoob");
console.log(n);

運行結果

例子2：

執行一次對大小寫敏感的查找

var str="Mr. Blue has a blue house";
console.log(str.search("blue"));

運行結果

例子3：

執行一次忽略大小寫的檢索

var str="Mr. Blue has a blue house";
console.log(str.search(/blue/i));

運行結果

slice （）

提取字符串片段，並在新的字符串中返回被提取的部分

例子1：

提取字符串的片斷

var str="Hello world!";
var n=str.slice(1,5);
console.log(n);

運行結果

例子2：

提取最後一個字符

var str="Hello world!";
var n=str.slice(-1);
console.log(n);

運行結果

split （）

把字符串分割成字符串數組

例子1：

把一個字符串分割成字符串數組

var str="How are you doing today?";
var n=str.split(" ");
console.log(n);

運行結果

例子2：

n 將輸出3個數組的值

var str="How are you doing today?";
var n=str.split(" ",3);
console.log(n);

運行結果

例子3：

使用一個字符作爲分隔符

var str="How are you doing today?";
var n=str.split("o");
console.log(n);

運行結果

startsWith （）

查看字符串是否以指定的子字符串開頭

例子1：

查看字符串是否爲 “Hello” 開頭

var str = "Hello world, welcome to the Runoob.";
var n = str.startsWith("Hello");
console.log(n);

運行結果

例子2：

查看從第 6 個索引位置是否以 “world” 開頭

var str = "Hello world, welcome to the Runoob.";
var n = str.startsWith("world", 6);
console.log(n);

運行結果

substr （）

從起始索引號提取字符串中指定數目的字符

例子1：

抽取指定數目的字符

var str="Hello world!";
var n=str.substr(2,3)
console.log(n);

運行結果

例子2：

在本例中，我們將使用 substr() 從字符串第二個位置中提取一些字符

var str="Hello world!";
var n=str.substr(2)
console.log(n);

運行結果

substring （）

提取字符串中兩個指定的索引號之間的字符

例子1：

在本例中，我們將使用 substring() 從字符串中提取一些字符

var str="Hello world!";
console.log(str.substring(3));
console.log(str.substring(3,7));

運行結果

toLowerCase （）

把字符串轉換爲小寫

例子1：

把字符串轉換爲小寫

var str="Runoob";
console.log(str.toLowerCase());

運行結果

toUpperCase （）

把字符串轉換爲大寫

例子1：

把字符串轉換爲大寫

var str="Runoob";
console.log(str.toUpperCase());

運行結果

trim （）

去除字符串兩邊的空白

例子1：

去除字符串的頭尾空格

var str = "       Runoob        ";
console.log(str.trim());

運行結果

toLocaleLowerCase （）

根據本地主機的語言環境把字符串轉換爲小寫

例子1：

將字符串轉換爲小寫

var str = "Runoob";
var res = str.toLocaleLowerCase();
console.log(res);

運行結果

toLocaleUpperCase （）

根據本地主機的語言環境把字符串轉換爲大寫

例子1：

將字符串轉換爲大寫

var str = "Runoob";
var res = str.toLocaleUpperCase();
console.log(res);

運行結果

valueOf （）

返回某個字符串對象的原始值

例子1：

返回 String 對象的原始值

var str="Hello world!";
console.log(str.valueOf());

運行結果

toString （）

返回一個字符串

例子1：

返回一個 String 對象的值

var str = "Runoob";
var res = str.toString();
console.log(res);

運行結果

ES6/7中字符串常用的方法

includes（）

返回布爾值，表示是否找到參數字符串

let s='Hello world!';
console.log(s.includes('o'));

運行結果

支持第二參數，表示開始搜索的位置

let s='Hello world!';
console.log(s.startsWith('world',6));

運行結果

startsWith（）

返回布爾值，表示參數字符串是否在源字符串的頭部

let s='Hello world!';
console.log(s.startsWith('Hello'));

運行結果

支持第二參數，表示開始搜索的位置

let s='Hello world!';
console.log(s.endsWith('Hello',5));

運行結果

endsWith（）

返回布爾值，表示參數字符串是否在源字符串的尾部

let s='Hello world!';
console.log(s.endsWith('!'));

運行結果

支持第二參數，表示開始搜索的位置

let s='Hello world!';
console.log(s.includes('Hello',6));

運行結果

repeat（）

返回一個新字符串，表示將原字符串重複n次

console.log('a'.repeat(3));
console.log('a'.repeat(0));
console.log('a'.repeat(2.6));

運行結果

注意：

如果參數是小數，會取整
如果參數是0，會得到空串
如果參數是負數或者Infinity，會報錯
如果參數是字符串、布爾型或其他類型，會先換算成整數

padStart（）、padEnd（）

字符串補全長度的功能，如果某個字符串不夠指定長度，會在頭部或尾部補全

padStart（）用於頭部補全
padEnd（）用於尾部補全

注意： padStart和padEnd一共接受兩個參數，第一個參數是字符串補全生效的最大長度，第二個參數是用來補全的字符串

console.log('a'.padStart(5, 'cd'));
console.log('a'.padStart(4, 'cd'));

console.log('a'.padEnd(5, 'cd'));
console.log('a'.padEnd(4, 'cd'));

運行結果

如果原字符串的長度，等於或大於最大長度，則字符串補全不生效，返回原字符串

console.log('aaa'.padStart(2, 'cd'));
console.log('aaa'.padEnd(2, 'cd'));

運行結果

用來補全的字符串與原字符串，兩者的長度之和超過了最大長度，則會截去超出位數的補全字符串

console.log('abc'.padStart(10, '0123456789'));

運行結果

如果省略第二個參數，默認使用空格補全長度

console.log('a'.padStart(4));
console.log('a'.padEnd(4));

運行結果

模板字符串

模板字符串是增強版的字符串，用反引號（`）標識

let temps="abc"
console.log(`ABC is ${temps}`)

運行結果

最後

如果本文對你有幫助得話，給本文點個贊❤️❤️❤️

歡迎大家加入，一起學習前端，共同進步！