文字

文字,在程式碼的世界也可以稱作「字串」,文字除了可以顯示有意義的詞彙,也可以透過相加的方式把文字組合,或是在一段詞彙中尋找對應的字詞或字母,更進階一點的用法,也可以顯示語音辨識的內容或物聯網串感器的狀態。

打開 Webduino Blockly 編輯器 ( https://blockly.webduino.io ),展開左側目錄「基本功能」,點選「文字」,可以看到對應的文字積木。

Webduino Blockly 文字積木

以下文字積木的解說,將會使用網頁互動測試區域展示,打開網頁互動測試區,下拉選單選擇「顯示文字」,左側積木的目錄最下方會出現「顯示文字」相關積木,接下來將會使用這些積木來顯示文字。

網頁互動測試 - 顯示文字

(積木) 輸入文字

在文字積木裡,最常用的積木就是「輸入文字」,透過這個積木可以把指定的文字放入變數、數學計算式或陣列。

輸入文字積木

使用「顯示」積木,後方銜接輸入文字的積木,輸入「大家好」三個字,點選右上角紅色按鈕執行,就會看到網頁裡出現大家好三個字。

顯示文字積木

如果會使用變數,也可以讓變數等於輸入的文字,接著顯示這個變數,顯示出來也一樣會是大家好三個字。

顯示變數積木

(積木) 印出

印出就是在瀏覽器裡頭常見的「警告視窗」,如果使用印出的積木,執行之後瀏覽器就會彈出警告視窗。

印出積木

舉例來說把輸入文字積木放在印出積木後方,輸入大家好三個字,點選右上角紅色按鈕執行,就會看到網頁彈出警告視窗,並出現大家好三個字。

因目前 Webduino Blockly 包含一些瀏覽器視窗保護機制,所以在執行後不會立即彈出警告視窗,此時只需要在印出之前加上「等待」積木,等待約 0.1 秒就會彈出警告視窗。

印出積木彈出警告視窗

(積木) 建立字串

建立字串其實就是「相加文字」的積木,在後方缺口接上文字,就可以把不同的文字組合。

建立字串積木

如果覺得缺口太少,可以點選藍色小齒輪增加缺口。

增加字串

舉例來說,如果後方第一個缺口放入「大家好」,第二個缺口放入「,我是 Webduino」,執行之後在網頁裡就會到「大家好,我是 Webduino」的文字。

顯示字串文字

(積木) 在變數後加入文字

「在變數後加入文字」的積木,可以想像成「建立字串」積的變形版本,原理就是「建立字串」的第一個缺口放入變數,第二個缺口放入文字。( 如果不知道變數是什麼,可以參考 變數教學 )

在變數積木後加入文字

舉例來說,先設定一個變數 a,將變數 a 設定為「大家好」,接著在變數 a 後方加入「,我是 Webduino」,最後將變數 a 顯示出來。

顯示變數後加入文字

(積木) 長度

長度積木後方會接著一串文字,使用這塊積木會回傳這串文字的長度。

長度積木

如果是「大家好」三個字,執行之後就會回傳 3,如果是「Webduino」,就會回傳 8。

顯示文字長度

(積木) 文字為空

文字為空的積木通常用於「邏輯判斷」,也就是判斷一個字串如果「長度為 0」就是空字串。

文字為空積木

使用的方法會放在「邏輯」積木裡,下方的例子如果字串長度為 0,執行之後會顯示 A,如果字串長度不為 0,則會顯示 B。( 邏輯積木會後面的教學介紹 )

「文字為空」積木使用方法

(積木) 取得某個文字在字串中的順序

再進行一些比較複雜的程式運算時,常常會需要取得某個文字在字串裡的位置或順序,在 Blockly 當中就可以使用「取得某個文字在字串中的順序」的積木來完成。

取得文字在字串中的順序

取得順序的方式可以從下拉選單選擇,選擇從第一個文字開始計算,或是從最後一個文字開始計算起。

選擇順序

變數的部分除了可以使用變數,也可以直接換成一段文字,舉例來說如果在 Webduino 這段文字內,從第一個文字開始尋找 d 這個字母,執行後就會顯示 4,也就表示 d 排在 Webduino 從前面數過來的第 4 個位置。

顯示文字在字串中的順序

(積木) 在字串中取得某個順序的文字

和「取得某個文字在字串中的順序」不同的是,「在字串中取得某個順序的文字」是指定一個順序號碼,從這個順序號碼回傳對應的文字。

字串中取得某個順序的文字

下拉選單可以選擇「取得指定順序的字元」、「取的倒數順序的字元」、「取得第一個字元」、「取得最後一個字元」以及「取得隨機字元」。

選擇需要取得的文字順序

同樣的,變數的部分除了可以使用變數,也可以直接換成一段文字,舉例來說如果在 Webduino 這段文字內,尋找第 2 個字元,執行之後就會顯示 e 這個字母。

變數換成文字積木取得字串中某個範圍的文字

(積木) 取得字串中某個範圍的文字

「取得字串中某個範圍的文字」與「在字串中取得某個順序的文字」有異曲同工之妙,差別在於「取得字串中某個範圍的文字」可以取得一個數字範圍內的文字。

取得字串某範圍的文字

如果設定範圍為 3 到 6,以 Webduino 這個文字來說,取出的文字就會是 bdui 這四個字母。

顯示要取得的文字範圍

(積木) 大小寫轉換

大小寫轉換顧名思義就是可以把小寫文字轉成大寫,大寫文字轉成小寫,但對中文字來說是沒有用處的。

大小寫轉換積木

除了單純轉換大小寫,也可以透過選單選擇將「首字母」改成大寫。

選擇大小寫轉換

如果使用「首字母大寫」,就可以把 webduino 的文字,在顯示的時候變成 Webduino。

首字母大寫積木

(積木) 消除空格

在使用文字的時候,常常會遇到左右兩側多出「空白」或「空格」,這時候就可以透過「消除空格」的積木來消除。

消除空格積木

除了消除兩側空格,也可以透過下拉選單選擇只消除左邊,或只消除右邊的空格。

選擇消除空格設定

舉例來說,我們如果使用建立字串的積木,將文字 A 和左側帶有空格的 B 相加,如果都沒有做任何處理,A 和 B 中間會有空格,但是如果對 B 使用了消除空格的積木,相加之後 A 與 B 中間就不會有空格了。

顯示消除空格文字

(積木) 輸入時顯示提示

這個積木是針對「輸入欄位」所設計的積木,也就是在輸入文字或數字的時候,會觸發警告視窗,並在警告視窗內顯示對應的文字。

輸入時顯示提示積木