先預告一下，枯燥但實用的工具包系列到今天為止，明天會開始聊聊它與 HTML/CSS 的實際應用。

從0.5開始的JavaScript 這一系列會盡量提供些實用的知識，讓您光是訂閱之後偶爾回來當工具書看都划算。

Ps. 為什麼要取工具包、撰寫初衷是什麼...? 這個可以在 Day8 找到答案喔 :)

前幾天分別介紹了使用物件、陣列常見的方法，但是還少了一個沒有介紹，那就是今日的主角字串啦。

字串

大/小寫轉換

1. 全部轉成大寫

var myStr = "heLLo WoRLd";
console.log(myStr.toUpperCase()); // HELLO WORLD

2. 全部轉成小寫

var myStr = "heLLo WoRLd";
console.log(myStr.toLowerCase()); // hello world

把字串變成陣列

1. split 中放入字串切割分組的關鍵詞，ex: ","
2. 不放則是切割每個字元
3. 第二個參數可以指定返回的陣列數量(可不加)

var myStr = "123abc".split("");
for(let i = 0; i < myStr.length; i++){
  console.log(myStr[i]); // 依序印出 1 2 3 a b c
}

第二個參數可指定數量，像是只返回 2 組，

var myStr = "123abc".split("", 2);
for(let i = 0; i < myStr.length; i++){
  console.log(myStr[i]); // 依序印出 1 2
}

還有一個使用情境是有一段好幾行的文章，但是你想切割出每一句，那就可以把切割的關鍵詞帶入 \n。

替換字元

1. 第一個參數為: 將被替換的字串
2. 第二個參數為: 將替換的新字串

var myStr = "abc";
var newStr = myStr.replace("c", "zzz");
console.log(newStr); // abzzz

左邊搜尋文字也可以放 正則式，常用寫法為 /搜尋文字/g。

1. 參數 g 為搜尋所有相符字串，若沒有帶入此參數的話，則是替換第一個搜尋到的結果。
2. 參數 i 為檢查時忽略大小寫。

此範例為搜尋所有的 c，並將其替換為 QQ

var myStr = "a c b c d";
var newStr = myStr.replace(/c/g, "QQ");
console.log(newStr); // a QQ b QQ d

Q: 此範例一樣為搜尋所有的 c，並將其替換為 QQ，但是為何沒有成功呢?

var myStr = "acbcd";
var newStr = myStr.replace(/C/g, "QQ");
console.log(newStr); // acbcd

A: 因為搜尋字串把 c 打成大寫，解法為改成小寫或是加上參數 i。

newStr = myStr.replace(/C/ig, "QQ");
console.log(newStr); // aQQbQQd

Ps. 正則式(regex)用法可沒這麼簡單，可以有更複雜的應用，詳情可以自己 Google XD

移除首尾空白

有時候使用者輸入的值，頭尾會不小心打到空白，如果想要移除的話，可以很簡單的使用這個方法，

var myStr = "   abc   ";
console.log(myStr.trim()); // abc

查找字串

可以檢查某字串是否包含在其中(有分大小寫)，用法和 Array 的一樣，如果有找到就返回其 index，否則回傳 -1。

var myStr = "Hello World";
console.log(myStr.indexOf("Hello")); // 0
console.log(myStr.indexOf("haha")); // -1
console.log(myStr.indexOf("World")); // 6

// 大小寫不同
console.log(myStr.indexOf("hello")); // -1

Since ES6

上方查找的方法會回傳其 index，但是也可以使用其他方法查找。

這個是 ES6 之後新增的，單純回傳有沒有找到，也就是回傳 true、false，
第二個參數可加上起始搜尋位置(可不加)。

var myStr = "Hello World";
console.log(myStr.includes("Hello")); // true
console.log(myStr.includes("QQ")); // false

取出指定範圍中的字串

1. 第一個參數是起始 index，若是負數則從最後數來。
2. 第二個參數是取出長度，不加則是取完剩下字元。

此範例欲取出 he，則在起始 index 填入 0，第二個長度參數填入 2，

var myStr = "hello";
console.log(myStr.substr(0, 2)); // he

返回指定位置的字元

var myStr = "abc";
console.log(myStr.charAt(0)) // a

Since ES6

For of 取值

var mtStr = "hello";
for (let char of mtStr) {
  console.log(char);
}
// "h"
// "e"
// "l"
// "l"
// "o"

解構賦值

可以到 Day9 看更多說明。

var myStr = "abc";
var [q, w, e] = myStr;
console.log(q, w, e); // a, b, c

重複印出字串

var myStr = "abc";
console.log(myStr.repeat(3)); // "abcabcabc"

那今日的分享就到這，我們明天見