iT邦幫忙

2022 iThome 鐵人賽

DAY 25
0
Modern Web

手把手web初學者系列 第 25

進一步跟JavaScript做個朋友吧~

  • 分享至 

  • xImage
  •  

要跟JS做朋友,就要來了解對方的性格才行~
JS 的型別,主要有兩種分別為

  1. Primitive data types 原始型別
  2. Object types 物件型別

Primitive data types處理 ,Object types處理 參考

今天先來介紹

Primitive data types 原始型別

有以下成員:

  • number 數值
    將數字轉換為字符串
    .toString
    用法:
    數值變數.toString(進位數)
    範例:

    let num = 15;
    let text = num.toString(2);/*使用二進制將數字轉換為字符串*/
    

    .toFixed
    用法:
    數值變數.toFixed(小數位數)
    範例:

    let num = 15.888;
    let text = num.toString(2);/*使將字符串四捨五入為指定的小數位數,結果會為15.89*/
    

    更多函式使用可以來W3Schools查看:JavaScript Number

  • string 字串
    .length 回傳字符串的長度
    .prototype 允許向字符串添加新的屬性&方法
    用法:
    物件名.prototype.新屬性方法名稱 = 值
    範例:

    <p id="demo"></p> /*HTML的內容*/
    <script>
    /*新增物件*/
    function Person(first, last, age, eye) {
      this.firstName = first;
      this.lastName = last;
      this.eyeColor = eye;
    }
    const myFather = new Person("John", "Doe", "blue");
    const myMother = new Person("Sally", "Rally", "green");
    /*新增屬性*/
    Person.prototype.nationality = "English";
    /*加入HTML*/
    document.getElementById("demo").innerHTML =
    "My father is " + myFather.nationality + "<br>" +
    "My mother is " + myMother.nationality;
    </script>
    /*結果會顯示
    My father is English
    My mother is English*/
    

    retrieve character 檢索字符
    slice() 提取字串中的一部分

    let myName = "Banana";
    let result = text.slice(0, 5);
    /*結果會回傳 banan*/
    let result = text.slice(3);
    /*結果會回傳 ana (第3個字到最後)*/
    

    indexOf() 回傳字串中第一次出現字符的位置

    let text = "Hello world, welcome to the universe.";
    let result = text.indexOf("welcome");/*回傳13*/
    text.indexOf("W");/*有分大小寫因此找不到,回傳-1*/
    text.indexOf("e", 10);/*從位置 10 開始搜尋“e”的第一個位置,回傳14*/
    

    • toLowerCase() 轉換為小寫
    • toUpperCase() 轉換為大寫
    • split() 字符串拆分

    let text = "How are you doing today?";
    const myArray = text.split(" ");
    /*結果 How,are,you,doing,today?*/
    let word = myArray[3];
    /*拆分單詞,並返回第2個單詞"you"*/
    myArray = text.split("");
    /*拆分每個字符,包括空格,結果為H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?*/
    myArray = text.split(" ", 2);
    /*使用限制參數,How,are*/
    

    更多函式使用可以來W3Schools查看:JavaScript String

  • boolean 布林值
    具有以下兩個值:truefalse

    更多函式使用可以來W3Schools查看:JavaScript Boolean

  • undefined 沒被定義賦值的變數

  • null 空值

`null` 和 `undefined` 差別:
undefined 型別的變數,**可以賦值**給 number 型別的變數
而 null( void ) 型別的變數**不能賦值**給 number 型別的變數

明天再繼續介紹另一個Object types 物件型別


上一篇
將靈魂注入網頁的JavaScript
下一篇
再進一步認識JavaScript
系列文
手把手web初學者30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言