整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
們知道字符串（String）類型是 JavaScript 中的基本數據類型之一，也是最常用的數據類型啦。下面我們來學習一下關于字符串的屬性方法以及其的使用等。
JavaScript 字符串其實很好理解，就是被包圍在單引號或雙引號中的任意字符。字符串可以用于存儲和處理文本。
示例：
例如像下面這樣聲明的變量都是字符串類型：
var str1 = "123";
var str2 = '12356';
var str3 = "你好，俠課島";
var str4 = 'hello summer';
var str5 = 'good_boy';
一般情況下字符串就是一個或多個字符組成，除此之外，我們還可以使用 new 關鍵字將字符串定義為一個對象：
var name = new String("summer");
console.log(name); // 輸出：summer
不過一般情況下我們最好不要創建 String 對象，因為這可能會導致執行速度變慢。
在 JavaScript 語言中我們可以通過索引來訪問字符串中的每個字符，字符串的索引也是從 0 開始，第一個字符索引值為 [0]，第二個字符索引值為[1]，以此類推。
示例：
例如下述代碼中，我們定義了一個字符串類型的變量 username，然后輸出變量中索引值為1的字符：
var username = "summer";
console.log(username[1]); // 輸出： u
因為索引是從 0 開始計數，那么索引為1，那應該就是字符串中的第二個字符串，也就是 u。
我們先來看下面這個字符串：
var hobby = "basketball";
你能知道這個字符串的長度為多少嗎，其實你數一下就能知道，這個字符串的長度就是10。因為這個字符串有10個字符，所以它的長度為10。
這里要注意的是，字符串里面包含的空格也是會計入長度的，有1個空格長度加1，2個空格長度加2。
在 JavaScript 語言中，我們可以使用 length 屬性來獲取字符串長度，length 屬性用于返回字符串的長度(字符數)。
示例：
例如獲取下面這個變量 hobby 的長度并輸出：
var hobby = "basketball";
console.log(hobby.length); // 輸出：10
實際使用時，可能會遇到帶有空格的字符串，那么空格會計入字符的長度嗎，我們來看看：
var str1 = "hello xkd";
console.log(str1.length); // 輸出：9
通過輸出結果我們可以知道，空格也會計入字符串的長度的。
從字符串的長度和索引的關系，我們可以得出一個結論，索引是從0開始，到length-1 結束的。
有些時候，字符串可能無法被解析，例如下面這個字符串：
var str1 = "嘿,你好呀~，"俠課島"";
console.log(str1); // Uncaught SyntaxError: Unexpected identifier
那這個時候要怎么辦呢，我們可以使用反斜桿 \ 來轉義字符串中的雙引號。
示例：
var str1 = "嘿,你好呀~，\"俠課島\"";
console.log(str1); //輸出：嘿,你好呀~，"俠課島"
轉義字符\可以用于轉義撇號，換行，引號，等其他特殊字符。下面是一些可以用于轉義字符轉義的特殊字符：
字符串的方法有很多，下面我們簡單來看一些比較常用到的幾個方法：
var str1 = "Hello XKD";
console.log(str1.toLocaleLowerCase());
//輸出： hello xkd
var str1 = "Hello XKD";
console.log(str1.toUpperCase());
//輸出： HELLO XKD
var str1 = "Hello";
console.log(str1.toString());
//輸出： Hello
var str1 = "Hello";
var str2 = "xkd";
console.log(str1.concat(str2));
//輸出： Helloxkd
var str1 = "Hello xkd, Congratulations on login!";
console.log(str1.indexOf('xkd'));
//輸出： 6
var str1 = "Hello xkd, Congratulations on login!";
console.log(str1.lastIndexOf('o'));
//輸出： 31
var str1 = "Hello xkd, Congratulations on login!";
console.log(str1.slice(6, 8));
//輸出： xk
var str1 = "Hello xkd, Congratulations on login!";
console.log(str1.split(" "));
//輸出： ["Hello", "xkd,", "Congratulations", "on", "login!"]
var str1 = "Hello xkd, Congratulations on login!";
console.log(str1.substring(11, 17));
//輸出： Congra
var str1 = "Hello xkd, Congratulations on login!";
console.log(str1.replace("xkd", "summer"));
//輸出： Hello summer, Congratulations on login!
HTML標簽相關的字符串格式化
string nl2br ( string $string )
nl2br() 就是將\n 替換成 <br> //javascript對\n才能夠執行換行,對</br>是不能執行換行
htmlspecialchars() 把一些預定義的字符轉換為 HTML 實體。
string htmlspecialchars(string,quotestyle,[character-set])
轉換以下字符及對應的實體
& （和號） 成為 &
" （雙引號） 成為 "
' （單引號） 成為 '
< （小于） 成為 <
> （大于） 成為 >第二個參數: ENT_COMPAT 只轉換雙引號, 保留單引號, 為默認值 compat: 兼容性
ENT_QUOTES 同時轉換兩種引號 quotes: 引號
ENT_NOQUOTES 不對引號進行轉換
<html>
<body>
<?php
$str = "John & \" 'Adams'";
echo htmlspecialchars($str, ENT_COMPAT);
echo "<br />";
echo htmlspecialchars($str, ENT_QUOTES);
echo "<br />";
echo htmlspecialchars($str, ENT_NOQUOTES);
?>
</body>
</html>輸出結果:John & " 'Adams'
John & " 'Adams'
John & " 'Adams'
htmlentities() 可以將所有的非ASCII碼字符轉換為對應的實體代碼;除字母、數字、\外, 漢字和鍵盤上其他字符都轉換
<?php
$str = "A 'quote' \" is <b>bold</b>" ;
echo htmlentities ( $str ); // 輸出后源代碼: A 'quote' is <b>bold</b>
echo htmlentities ( $str , ENT_QUOTES ); // 輸出后源代碼: A 'quote' is <b>bold</b>
?>返回的結果:A 'quote' "is <b>bold</b>
A 'quote' "is <b>bold</b>
注意: htmlspecialchars()和htmlentities作用直接輸出HTML腳本
htmlspecialchars()和htmlentities()函數對于轉義字符"\"處理,不會轉義實體代碼,要么當轉義字符對待,要么原樣輸出;
PHP中htmlentities和htmlspecialchars的區別
這兩個函數的功能都是轉換字符為HTML字符編碼, 特別是url和代碼字符串。防止字符標記被瀏覽器執行。
使用中文時沒什么區別, 但htmlentities會格式化中文字符使得中文輸入是亂碼。
htmlentities轉換所有的html標記, htmlspecialchars只格式化& ' " < 和 > 這幾個特殊符號
addslashes() 在指定的預定義字符前添加反斜杠。
這些預定義字符是：單引號 (') 雙引號 (") 反斜杠 (\) NULL字符(\x00)
提示：該函數可用于為存儲在數據庫中的字符串以及數據庫查詢語句準備合適的字符串。
注釋：默認情況下，PHP 指令 magic_quotes_gpc 為 on，對所有的 GET、POST 和 COOKIE數據自動運行 addslashes()。
不要對已經被magic_quotes_gpc轉義過的字符串使用 addslashes()，因為這樣會導致雙層轉義。
遇到這種情況時可以使用函數 get_magic_quotes_gpc() 進行檢測。(如:$c=(!get_magic_quotes_gpc())?addslashes($c):$c;)
在本例中，我們要向字符串中的預定義字符添加反斜杠：
<?php
$str = "Who's John Adams?";
echo $str . " This is not safe in a database query.<br />";
echo addslashes($str) . " This is safe in a database query.";
?>輸出：
Who's John Adams? This is not safe in a database query.
Who\'s John Adams? This is safe in a database query.
<?php
header("Content-type:text/html; charset=utf-8");
$str = "wo are \x0a studying \x00 php";
echo $str;
echo "<br>";
echo addslashes($str);
?>輸出:
wo are studying php
wo are studying >wo are studying \0 php< php
stripslashes() 刪除反斜線（"\"）
在提交的表單數據中 ' " \ 等字符前被自動加上一個\ ,這是配置文件php.ini中選項magic_quotes_gpc在起作用，
默認是打開的，如果不處理則將數據保存到數據庫時，有可能會被數據庫誤當成控制符號而引起錯誤。
通常htmlspecialchars()和stripslashes()函數復合的方式，聯合處理表單中的提交的數據htmlspecialchars(stripslashes())
strip_tags()
string strip_tags ( string $str [, string $allowable_tags ] )
剝去 HTML、XML 以及 PHP 的標簽。
<?php
echo strip_tags("Hello <b><i>world!</i></b>","<b>");
?>輸出結果:Hello world!
實例:
<?php
$str = "<b>webserver;</b> & \ 'Linux' & Apache";
echo "$str"; //直接輸出
echo "<br/>";
echo htmlspecialchars($str,ENT_COMPAT); //只轉換雙引號,為默認參數
echo "<br />";
echo htmlspecialchars($str,ENT_NOQUOTES); //不對引號進行轉換
echo "<br />";
echo htmlspecialchars($str,ENT_QUOTES); //同時轉換單引號和雙引號
echo "<br />";
echo htmlentities($str); //將所有的非ASCII碼字符轉換為對應的實體代碼
echo "<br />";
echo addslashes($str); //將" ' \ 字符前添加反斜線
echo "<br />";
echo stripslashes($str); //刪除反斜線
echo "<br />";
echo strip_tags($str); //刪除<html>標記
?>輸出結果:
webserver; & \ 'Linux' & Apache
返回在指定位置的字符。
var str="abc"
console.log(str.charAt(0))//a返回在指定的位置的字符的 Unicode 編碼。
var str="abc"
console.log(str.charCodeAt(1))//98連接字符串。
var a = "abc";
var b = "def";
var c = a.concat(b);
console.log(c);//abcdef檢索字符串。indexOf() 方法對大小寫敏感！
var str="Hello world!"
console.log(str.indexOf("Hello"))//0
console.log(str.indexOf("World"))//-1
console.log(str.indexOf("world"))///6match() 方法可在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配。該方法類似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。
var str="1 abc 2 def 3"
console.log(str.match(/\d+/g))//123replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。
var str="abc Def!"
console.log(str.replace(/abc/, "CBA"))//CBA Def!search() 方法用于檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串。要執行忽略大小寫的檢索，請追加標志 i。如果沒有找到任何匹配的子串，則返回 -1。
var str="abc DEF!"
console.log(str.search(/DEF/))//4提取字符串的片斷，并在新的字符串中返回被提取的部分。
stringObject.slice(start,end);
start :要抽取的片斷的起始下標。如果是負數，則該參數規定的是從字符串的尾部開始算起的位置。也就是說，-1 指字符串的最后一個字符，-2 指倒數第二個字符，以此類推。
end：緊接著要抽取的片段的結尾的下標。若未指定此參數，則要提取的子串包括 start 到原字符串結尾的字符串。
如果該參數是負數，那么它規定的是從字符串的尾部開始算起的位置。
var str="abc def ghk"
console.log(str.slice(6))//f ghk把字符串分割為字符串數組。
var str="abc def ghi jkl"
console.log(str.split(" "))//["abc", "def", "ghi", "jkl"]
console.log(str.split("") )//["a", "b", "c", " ", "d", "e", "f", " ", "g", "h", "i", " ", "j", "k", "l"]
console.log(str.split(" ",3))//["abc", "def", "ghi"]把字符串轉換為小寫。
var str="ABC def!"
console.log(str.toLocaleLowerCase())//abc def!把字符串轉換為大寫。
var str="ABC def!"
console.log(str.toLocaleUpperCase())//ABC DEF!把字符串轉換為小寫。
var str="ABC def!"
console.log(str.toLowerCase())//abc def!把字符串轉換為大寫。
var str="ABC def!"
console.log(str.toUpperCase())//ABC DEF!從起始索引號提取字符串中指定數目的字符。
stringObject.substr(start,length)。
start：必需。要抽取的子串的起始下標。必須是數值。如果是負數，那么該參數聲明從字符串的尾部開始算起的位置。也就是說，-1 指字符串中最后一個字符，-2 指倒數第二個字符，以此類推。
length：可選。子串中的字符數。必須是數值。如果省略了該參數，那么返回從 stringObject 的開始位置到結尾的字串。
var str="abc def"
console.log(str.substr(2))//c def
console.log(str.substr(2,4))// c de提取字符串中兩個指定的索引號之間的字符。
stringObject.substring(start,stop)。
start ：必需。一個非負的整數，規定要提取的子串的第一個字符在 stringObject 中的位置。
stop ：可選。一個非負的整數，比要提取的子串的最后一個字符在 stringObject 中的位置多 1。如果省略該參數，那么返回的子串會一直到字符串的結尾。
var str="abc def"
console.log(str.substring(2))//c def
console.log(str.substring(2,4))// c相同點：如果只是寫一個參數，兩者的作用都一樣：都是是截取字符串從當前下標以后直到字符串最后的字符串片段。
substr(startIndex);
substring(startIndex);
var str = '123456789';
console.log(str.substr(2)); // "3456789"
console.log(str.substring(2)) ;// "3456789"不同點：第二個參數
substr（startIndex,lenth）：第二個參數是截取字符串的長度（從起始點截取某個長度的字符串）；
substring（startIndex, endIndex）：第二個參數是截取字符串最終的下標 （截取2個位置之間的字符串,‘含頭不含尾’）。
console.log("123456789".substr(2,5)); // "34567"
console.log("123456789".substring(2,5)) ;// "345"let s = 'a';
s.codePointAt(0) // 134071
s.codePointAt(1) // 57271
s.codePointAt(2) // 97codePointAt方法的參數，是字符在字符串中的位置（從 0 開始）。
上面代碼中，JavaScript 將“a”視為三個字符，codePointAt 方法在第一個字符上，正確地識別了“”，返回了它的十進制碼點 134071（即十六進制的20BB7）。
在第二個字符（即“”的后兩個字節）和第三個字符“a”上，codePointAt方法的結果與charCodeAt方法相同。
ES5 提供String.fromCharCode方法，用于從碼點返回對應字符，但是這個方法不能識別 32 位的 UTF-16 字符（Unicode 編號大于0xFFFF）。
String.fromCharCode(0x20BB7)
// "?"上面代碼中，String.fromCharCode不能識別大于0xFFFF的碼點，所以0x20BB7就發生了溢出，最高位2被舍棄了，最后返回碼點U+0BB7對應的字符，而不是碼點U+20BB7對應的字符。
ES6 提供了String.fromCodePoint方法，可以識別大于0xFFFF的字符，彌補了String.fromCharCode方法的不足。
在作用上，正好與codePointAt方法相反。
String.fromCodePoint(0x20BB7)
// ""
String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'
// truefor (let codePoint of 'abc') {
console.log(codePoint)
}
// "a"
// "b"
// "c"除了遍歷字符串，這個遍歷器最大的優點是可以識別大于0xFFFF的碼點，傳統的for循環無法識別這樣的碼點。
at方法可以識別Unicode 編號大于0xFFFF的字符，返回正確的字符。
‘abc’.at(0)//"a"
'吉'.at(0)//"吉"許多歐洲語言有語調符號和重音符號。為了表示它們，Unicode 提供了兩種方法。一種是直接提供帶重音符號的字符，比如ǒ（u01D1）。
另一種是提供合成符號（combining character），即原字符與重音符號的合成，兩個字符合成一個字符，比如O（u004F）和ˇ（u030C）合成ǒ（u004Fu030C）。
這兩種表示方法，在視覺和語義上都等價，但是 JavaScript 不能識別。
'\u01D1'==='\u004F\u030C' //false
'\u01D1'.length // 1
'\u004F\u030C'.length // 2上面代碼表示，JavaScript 將合成字符視為兩個字符，導致兩種表示方法不相等。
ES6 提供字符串實例的normalize()方法，用來將字符的不同表示方法統一為同樣的形式，這稱為 Unicode 正規化。
'\u01D1'.normalize() === '\u004F\u030C'.normalize()
// true傳統上，JavaScript 只有indexOf方法，可以用來確定一個字符串是否包含在另一個字符串中。ES6 又提供了三種新方法。
**includes()**：返回布爾值，表示是否找到了參數字符串。
**startsWith()**：返回布爾值，表示參數字符串是否在原字符串的頭部。
**endsWith()**：返回布爾值，表示參數字符串是否在原字符串的尾部。
let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true這三個方法都支持第二個參數，表示開始搜索的位置。
let s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false上面代碼表示，使用第二個參數n時，endsWith的行為與其他兩個方法有所不同。它針對前n個字符，而其他兩個方法針對從第n個位置直到字符串結束。
repeat方法返回一個新字符串，表示將原字符串重復n次。
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""參數如果是小數，會被取整。
'na'.repeat(2.9) // "nana"如果repeat的參數是負數或者Infinity，會報錯。
'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeErrorES2017 引入了字符串補全長度的功能。如果某個字符串不夠指定長度，會在頭部或尾部補全。padStart()用于頭部補全，padEnd()用于尾部補全。
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'上面代碼中，padStart和padEnd一共接受兩個參數，第一個參數用來指定字符串的最小長度，第二個參數是用來補全的字符串。
如果原字符串的長度，等于或大于指定的最小長度，則返回原字符串。
'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'如果用來補全的字符串與原字符串，兩者的長度之和超過了指定的最小長度，則會截去超出位數的補全字符串。
'abc'.padStart(10, '0123456789')
// '0123456abc'如果省略第二個參數，默認使用空格補全長度。
'x'.padStart(4) // ' x'
'x'.padEnd(4) // 'x 'padStart的常見用途是為數值補全指定位數。下面代碼生成 10 位的數值字符串。
'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"另一個用途是提示字符串格式。
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"matchAll方法返回一個正則表達式在當前字符串的所有匹配。
模板字符串（template string）是增強版的字符串，用反引號（`）標識。它可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。-----字符串模板，工作中用到比較多。
// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
console.log(`string text line 1
string text line 2`);
// 字符串中嵌入變量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`上面代碼中的模板字符串，都是用反引號表示。如果在模板字符串中需要使用反引號，則前面要用反斜杠轉義。
let greeting = `\`Yo\` World!`;如果使用模板字符串表示多行字符串，所有的空格和縮進都會被保留在輸出之中。
$('#list').html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`);上面代碼中，所有模板字符串的空格和換行，都是被保留的，比如<ul>標簽前面會有一個換行。如果你不想要這個換行，可以使用trim方法消除它。
$('#list').html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`.trim());模板字符串中嵌入變量，需要將變量名寫在${}之中。
function authorize(user, action) {
if (!user.hasPrivilege(action)) {
throw new Error(
// 傳統寫法為
// 'User '
// + user.name
// + ' is not authorized to do '
// + action
// + '.'
`User ${user.name} is not authorized to do ${action}.`);
}
}大括號內部可以放入任意的 JavaScript 表達式，可以進行運算，以及引用對象屬性。
let x = 1;
let y = 2;
`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"
`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"
let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"模板字符串之中還能調用函數。
function fn() {
return "Hello World";
}
`foo ${fn()} bar`
// foo Hello World bar如果大括號中的值不是字符串，將按照一般的規則轉為字符串。比如，大括號中是一個對象，將默認調用對象的toString方法。
如果模板字符串中的變量沒有聲明，將報錯。
// 變量place沒有聲明
let msg = `Hello, ${place}`;
// 報錯由于模板字符串的大括號內部，就是執行 JavaScript 代碼，因此如果大括號內部是一個字符串，將會原樣輸出。
`Hello ${'World'}`
// "Hello World"模板字符串甚至還能嵌套。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
