模板字串的應用

作為j**ascript的未來，es6已經到來。作為已完成的標準，es6帶來了許多新特性使其在如今的web世界仍有競爭力。es6的方方面面不一定全都適合你，本文集會簡要介紹一些順手且可行的新特性。

varanimal ="cow";

varanimal ='cow';

我更喜歡單引號是有原因的。首先，單引號在組合使用html字串和引用屬性時更加方便。

// with single quotes, there's no need to

// escape the quotes around the class value

varbut ='s**e';

// this is a syntax error:

varbut ="big">s**e";

// this works:

varbut ="s**e";

只有在 html 中使用單引號之時才需要轉義，而html中是極少使用單引號的。我能想到的場景無非是內聯 j**ascript 或 css，也就是說此時寫的東西是靠不住的或者極度依賴標記語言。而在正文中，還不如使用排版更悅目的`『`而不是單引號`'`。[^注: 也就是說不用轉義了。]

旁註: 當然，html相當寬容，你大可以刪除引號或者轉而使用單引號來包裹屬性，但是我寧願寫可讀性更好的標記語言而不是過分依賴語法分析程式。如今的html5語法分析程式如此寬容是因為過去人們寫的標記語言太糟糕了，這不是繼續糟糕下去的藉口。

我更喜歡單引號還有乙個原因。在編寫高效能要求的**時候我會大量使用php，而php是區分單引號和雙引號的。php的單引號不允許字串內變數替換，而雙引號允許。

也就是說在 php 3 和 php 4 時代使用單引號的效率更高，因為語法分析程式省去了檢索整個字串進行變數替換的麻煩。看下面的例子你就明白了：

<?php $animal ='cow';

$sound ='moo';

echo 'the animal is $animal and its sound is $sound';

// => the animal is $animal and its sound is $sound

echo "the animal is $animal and its sound is $sound";

// => the animal is cow and its sound is moo

?>

j**ascript不支援字串內的變數替換，所以不得不使用拼接字串來代替。這顯然太麻煩了，不得不頻繁地在引文內和引文外來回切換。 

varanimal ='cow';

varsound ='moo';

alert('the animal is '+animal +' and its sound is '+

sound);

// => "the animal is cow and its sound is moo"

在處理越來越長的字串，尤其是組合使用大量 html 的時候真的是麻煩異常。而且很可能到頭來 linting 工具會報錯說行末的 + 後面有個多於的空格。這問題完全是因為j**ascript不支援多行字串。

// 這樣寫是不行的：

varlist ='';

// 可以這樣寫，但是，呃

varlist ='';

// 這是最常見的寫法，但是，呃

varlist ='';

為了在搞定麻煩的j**ascript字串處理和拼接問題，還是得走到老路上，寫個庫。現有的眾多html模板庫中，mustache.js 大概是影響力最大的。這些庫大都遵循自定的非標準語法，使用起來完全看心情。打個比方，這就像是你用markdown格式寫東西，然後意識到」markdown」本身就有很多不同的意思。[注：markdown有眾多風格]

隨著es6及其標準的到來，我們欣喜地發現使用j**ascript處理字串時可以使用模板字串了。現在主流瀏覽器對模板字串的支援非常及時：chrome 44+, firefox 38+, microsoft edge 和 webkit 全部支援。遺憾的是 safari 尚未支援，但是也不會等很久。

模板字串的設計天才之處在於使用了全新的字串限定符，即在html和尋常文字中皆不常見的反引號(`)。

varanimal ='cow';

varsound ='moo';

alert(`the animal is $ and its sound is $`);

// => "the animal is cow and its sound is moo"

${} 接受任意的 j**ascript 表示式並返回相應值，可以用來進行數**算或者訪問物件的屬性等等。

varout=`ten times two totally is $`;

// => "ten times two totally is 20"

varanimal =

alert(`

the $ is of the

$ ilk,

one end is for the $,

the other for the $

`);// =>

/*the cow is of the

bovine ilk,

one end is for the moo,

the other for the milk

*/第二個例子表明多行字串再也不是個問題啦。

還可以在模板字串之前加上乙個標籤，用作函式名，可以呼叫這個函式而字串就是引數。下面的例子實現了對返回的字串進行編碼生成url，避免總是使用不友好的 namedencodeuricomponent。

這樣是能用是能用，卻依賴於隱式的陣列到字串的強制轉換。傳遞給函式的元素並不是字串，而是字串和值構成的陣列。如果像上面這樣使用，為了方便會被自動轉換成字串，但是正確的方法是直接訪問陣列成員。

在標籤函式內部，不僅可以使用完整字串，還可以只使用字串的一部分。

functiontag (strings,values)

tag `you $ it`;

/* =>

array [ "you ", " it" ]7it

*/你還可以使用原始字串的陣列，這意味著可以獲取字串中的所有字元，這裡說的「所有」是指包括控制字元[^注：非列印字元]。比如在新增換行時使用的 \n 就是控制字元。在字串中只能得到兩個空格，而在原始字串中可以取得 \n 字元。

functiontag (strings,values)

tag `you $ \nit`;

/* =>

array [ "you ", " it" ]7it

\nit

*/模板字串是es6引入的超讚小特性，現在就可以使用。如果需要支援更老舊的瀏覽器，當然還可以把 es6 轉換編譯 [注：transpile] 回 es5。還可以針對模板字串做一下特性檢測，使用諸如 featuretests.io 的庫，或者用下面的**：

vartemplatestrings =false;

try`");

templatestrings =true;

}catch(err)

if(templatestrings){

// …

多行字串 模板字串

多行字串 下面是普通字串的寫法 普通字串 var l abcd console.log l 編譯結果 如何讓讓乙個字串獨佔多行呢？就需要用到es6 裡的多行字串 多行字串 var i ab cd console.log i 編譯結果 再說說拼接字串，一般情況我們是如何拼接字串的呢？看下面 正常拼接字...

模板 字串 字串匹配

計算next陣列的方法是對於長度為n的匹配串，從0到n 1位依次求出字首字尾最大匹配長度。下面的寫法是僅僅檢測有沒有匹配然後返回第乙個匹配位置，而不是返回所有匹配位置。include include include using namespace std const int n 100 char s...

字串模板

include include include include using namespace std const int maxn 1e6 7 int next maxn string s,t void get next string str void kmp intmain include in...