5-程式設計從零開始系列-程式基礎：字串處理範例

# 引言

- 本篇內容只適用於建立UI的探索，不適用node.js和console的命令列

- 上一篇中已經介紹了最基礎的UI(使用者界面)
- 這篇UI的部分就沿用以下，只拓寬文字框和修改處理文字：
<script>
function 處理文字()
{
  var 輸入文字=ta1.value;
  ta2.value=輸入文字.trim()
                     .split("\n")
                   .map( item=>("#"+item) )
                   .join("\n");
}
</script>
<textarea id="ta1" style="width:90vw;height:200px;">項目1
項目2
項目3</textarea>
<br>
<button onclick="處理文字();">測試😁😁</button>
<br>
<textarea id="ta2" style="width:90vw;height:200px;"></textarea>
- 接下來探討處理文字這個函式裏面的內容

# 什麼是函式

- 如果大家對數學函數還有印象，它做的事情就是讓你能丟進去x，通過某種對x的運算得到想要的y值
- 在程式裡類似的東西叫函式(function)，不過你不見得要丟東西給它，它也不見得會產出東西，而可以只是用它來重複執行某些特定動作
- 在前一個範例裏面，處理文字這個函式會在你每次點按按鈕時執行，於是文字框1的字串被處理後丟到文字框2裏面顯示
- 這樣的過程被稱為輸入(input)和輸出(output)
- 寫程式其實就是在寫函式，處理各種輸入輸出

# 字串處理範例：把每行的開頭加上#字符號

ta2.value=輸入文字.trim()
                     .split("\n")
                   .map( item=>("#"+item) )
                   .join("\n");

- 解析：

  * trim和split是字串(string)內建的功能，所有功能列表可以參考這裏
https://www.w3schools.com/jsref/jsref_obj_string.asp
  * map和join是陣列(array)的內建功能，所有功能列表可以參考這裏
https://www.w3schools.com/jsref/jsref_obj_array.asp
  * trim的作用是移除這個字串最開頭和最結尾的空白字元(space, tab...)或是換行符號(\n)
  * split是用某個指定的字串作為界限將字串切開成陣列(array)，例如本案例用換行符號切開就會得到["項目1","項目2","項目3"]這個陣列
  * map的意思是對陣列裡的每一個項目都執行一個相同的改變流程，裏面要傳入一個函式給他，在此( item=>("#"+item) )是另一種函式的表達方式，跟這樣寫是等價的
function(item){
return "#"+item;
}
於是在每一個項目都執行這個變化函式後應該就會得到["#項目1","#項目2","#項目3"]這個陣列
  * join的意思是用同一個特定字串把陣列裡的所有元素拼接起來，如果今天傳入的是"abc"，那這個範例就應該得到"#項目1abc#項目2abc#項目3" 項目1 項目2 項目3

# w3school的語法測試頁(可修改程式)

- 把範例程式碼貼到這頁上面/左邊的框框再按run就可以即時測試程式

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_substr