JavaScript 基本資料型別
- String型別
- 字串屬性和方法
- 字串屬性
- 字串方法
- Number型別
- 算術運算子
- 賦值運算子
- 比較運算子
- 邏輯運算子
- Boolean型別
- Undefined型別
- Null型別
- 型別判斷
String型別
字串是存盤字符（比如 “Keafmd”）的變數，
字串可以是引號中的任意文本，可以使用單引號或雙引號，
<script type="text/javascript">
var name = '牛哄哄的柯南';
</script>
字串屬性和方法
原始值字串，如 “John”, 沒有屬性和方法(因為他們不是物件)，
原始值可以使用 JavaScript 的屬性和方法，因為 JavaScript 在執行方法和屬性時可以把原始值當作物件，
字串屬性
| 屬性 | 說明 |
|---|---|
| constructor | 回傳創建字串屬性的函式 |
| length | 回傳字串的長度 |
| prototype | 允許您向物件添加屬性和方法 |
字串方法
| 方法 | 描述 |
|---|---|
| charAt() | 回傳指定索引位置的字符 |
| charCodeAt() | 回傳指定索引位置字符的 Unicode 值 |
| concat() | 連接兩個或多個字串，回傳連接后的字串,產生新字串 |
| fromCharCode() | 將 Unicode 轉換為字串 |
| indexOf() | 回傳字串中檢索指定字符第一次出現的位置 |
| lastIndexOf() | 回傳字串中檢索指定字符最后一次出現的位置 |
| localeCompare() | 用本地特定的順序來比較兩個字串 |
| match() | 找到一個或多個正則運算式的匹配 |
| replace() | 替換與正則運算式匹配的子串 |
| search() | 檢索與正則運算式相匹配的值 |
| slice() | 提取字串的片斷，并在新的字串中回傳被提取的部分 |
| split() | 把字串分割為子字串陣列 |
| substr() | 從起始索引號提取字串中指定數目的字符 |
| substring() | 提取字串中兩個指定的索引號之間的字符 |
| toLocaleLowerCase() | 根據主機的語言環境把字串轉換為小寫 |
| toLocaleUpperCase() | 根據主機的語言環境把字串轉換為大寫 |
| toLowerCase() | 把字串轉換為小寫 |
| toString() | 回傳字串物件值 |
| toUpperCase() | 把字串轉換為大寫 |
| trim() | 移除字串首尾空白 |
| valueOf() | 回傳某個字串物件的原始值 |
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var msg = 'hello javascript';
//length 屬性，表示的是字串的長度
//charAt 回傳索引位置的字符
//需求：查詢字串的最后一個 字符是什么
console.log('字串最后一個 字符：'+msg.charAt(msg.length-1))
//concat
var str1 = "hello ";
var str2 = "world!"
console.log("str1.concat(str2):"+str1.concat(str2))
console.log("str1: "+str1);
console.log("str2: "+str2);
//indexOf lastIndexOf
var str3 = "hello world!"
console.log("str3.indexOf('l'): "+str3.indexOf('l'))
console.log("str3.lastIndexOf('l'): "+str3.lastIndexOf('l'))
//slice 切片
/**
* 17
* K e a f m d
1 一個引數，表示，從索引位置開始（包含），到字串末尾結束
2 兩個引數，start 從索引位置開始（包含），end :結束位置 (不包含)
*/
var str4 ="Hello My Name is Keafmd,Age is 18"
console.log('str4.slice(6): '+str4.slice(6))
console.log('str4.slice(17): '+str4.slice(17,23))
console.log('str4.slice(-2,str4.length): '+str4.slice(-2,str4.length))
// substr\substring
console.log("str4.substr(17,6): "+str4.substr(17,6))
console.log("str4.substring(17,6): "+str4.substring(17,23))
//toLowerCase \ toUpperCase
console.log("str4.toUpperCase(): "+(str4.toUpperCase()))
console.log("str4.toLowerCase(): "+(str4.toLowerCase()))
console.log("str4: "+str4);//原始字串不會改變
//trim
var str5 =" Hello "
console.log("str5.length: "+str5.length);
console.log("str5.trim().length: "+str5.trim().length);
</script>
</head>
<body>
</body>
</html>
效果截圖：
Number型別
JavaScript 只有一種數字型別，數字可以帶小數點，也可以不帶，
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
var age = 18;
var number = 34.7
//輸出
console.log('age:'+age)
console.log('number:'+number)
</script>
<title></title>
</head>
<body>
</body>
</html>
效果截圖：
算術運算子
| 運算子 | 描述 | 例子 | x 運算結果 | y 運算結果 |
|---|---|---|---|---|
| + | 加法 | x=y+2 | 7 | 5 |
| - | 減法 | x=y-2 | 3 | 5 |
| * | 乘法 | x=y*2 | 10 | 5 |
| / | 除法 | x=y/2 | 2.5 | 5 |
| % | 取模（余數） | x=y%2 | 1 | 5 |
| ++ | 自增 | x=++y | 6 | 6 |
| ++ | 自增 | x=y++ | 5 | 6 |
| – | 自減 | x=- -y | 4 | 4 |
| – | 自減 | x=y- - | 5 | 4 |
1.自增(++)和自減(- -)：放到變數的前面有限參與運算，然后再跟運算式計算，
2.如果+參與運算的型別是字串,則會將結果以字串的形式回傳，
3.數值型別和bool型別運算時，bool型別會轉換成數字， true：1 false：0，
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//算數運算
var numa = 5;
var numb = 6;
var numc = 10;
console.log("numa+numb: "+(numa+numb));
console.log("numa-numb: "+(numa-numb));
console.log("numa*numb: "+(numa*numb));
console.log("numa/numb: "+(numa/numb));
console.log("numc%numb: "+(numc%numb));
// -- ++
var numd = 2;
// console.log(numd++);
// console.log(numd);
console.log(++numd);
console.log(numd);
//字串 參與算數運算
console.log('1'+'1')
//boolean 參與算數運算
console.log("true+1 : "+(true+1));
console.log("false+1 : "+(false+1));
</script>
</head>
<body>
</body>
</html>
效果截圖：
賦值運算子
賦值運算子用于給 JavaScript 變數賦值，
給定 x=10 和 y=5，下面的表格解釋了賦值運算子：↓
| 運算子 | 例子 | 等同于 | 運算結果 |
|---|---|---|---|
| = | x=y | x=5 | |
| += | x+=y | x=x+y | x=15 |
| -= | x-=y | x=x-y | x=5 |
| *= | x*=y | x=x*y | x=50 |
| /= | x/=y | x=x/y | x=2 |
| %= | x%=y | x=x%y | x=0 |
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//賦值運算
var numa = 100;
var numb = numa;
console.log("numa: "+numa); //100
console.log("numb: "+numb); // 100
numa += 10; //numa = numa +10
console.log("numa: "+numa); //110
numa -= 10; //numa = numa - 10
console.log("numa: "+numa); //100
numa *= 2; //numa = numa * 2
console.log("numa: "+numa); //200
numa /= 5; //numa = numa /5
console.log("numa: "+numa); // 40
numa %= 38; //numa = numa % 38
console.log("numa: "+numa); // 2
</script>
</head>
<body>
</body>
</html>
效果截圖：
比較運算子
比較運算子在邏輯陳述句中使用，以測定變數或值是否相等，
給定x=5，下面的表格解釋了比較運算子：↓
| 運算子 | 描述 | 比較 | 回傳值 |
|---|---|---|---|
| == | 等于 | x==8 | false |
| == | 等于 | x==5 | true |
| === | 絕對等于（值和型別均相等） | x===“5” | false |
| === | 絕對等于（值和型別均相等） | x===5 | true |
| != | 不等于 | x!=8 | true |
| !== | 不絕對等于（值和型別有一個不相等，或兩個都不相等） | x!==“5” | true |
| !== | 不絕對等于（值和型別有一個不相等，或兩個都不相等） | x!==5 | false |
| > | 大于 | x>8 | false |
| < | 小于 | x<8 | true |
| >= | 大于或等于 | x>=8 | false |
| <= | 小于或等于 | x<=8 | true |
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var numa = 100;
var numb = 150;
var numc = 100;
console.log("100 == 150: "+(numa == numb));
console.log("100 != 150: "+(numa != numb));
console.log("100 > 150: "+(numa > numb));
console.log("100 < 150: "+(numa < numb));
console.log("100 >= 150: "+(numa >= numb));
console.log("100 < 150: "+(numa <= numb));
//== ===
var v1 = 100;
var v2 = '100';
var v3 = 100;
//兩個等于會有型別轉換（自動）
console.log("v1 == v2: " +(v1 == v2));
console.log("v1 === v2: " +(v1 === v2));
console.log("v1 === v3: " +(v1 === v3));
</script>
</head>
<body>
</body>
</html>
效果截圖：
邏輯運算子
邏輯運算子用于測定變數或值之間的邏輯，
給定 x=6 以及 y=3，下表解釋了邏輯運算子：↓
| 運算子 | 描述 | 例子 |
|---|---|---|
| && | and | (x < 10 && y > 1) 為 true |
| || | or | (x==5 || y==5) 為 false |
| ! | not | !(x==y) 為 true |
樣例代碼：
<!DOCTYPE html>
<htm<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// var b1 = true;
// var b2 = false;
// var b3 = true;
// var b4 = false;
//兩個都是true，則運算式的結果為true，否則為false
console.log( "true && true : "+(true && true)); //true
console.log( "true && false : "+(true && false)) ;//false
console.log( "false && false : "+(false && false)); //false
//只要有一個為true，則運算式的結果為true
console.log( "true || true : "+(true || true)) ;// true
console.log( "true || false : "+(true || false)) ;// true
console.log( "false || false : "+(false || false)) ;// true
console.log( "!true : "+(!true))
console.log( "!false : "+(!false))
// var result = 邏輯運算式 true/false ? '運算式位真的結果' : '運算式為false'
var age = 70;
//三目運算
var info = age>=18 ? '成年' : '未成年';
console.log(info)
</script>
</head>
<body>
</body>
</html>
效果截圖：
Boolean型別
該型別只有兩個值，true和false
表示真或者假.常用于判斷，
true ：取值 true 、非0的數字、非空字串(字符長度為0)
false：取值 false、0、 空字串、null、undefined
Undefined型別
只有一個值，即undefined值，使用var宣告了變數，但未給變數初始化值，那么這個變數的值就是undefined，
Null型別
Null型別被看做空物件指標，Null型別也是空的物件參考，
型別判斷
typeof 運算子，回傳的是變數的型別名字（字串）
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
var t1 = 'Keafmd';
var t2 = 3.14;
var t3 = false;
var t4 = null;
var t5 = undefined;
var t6 = [];
var t7 = {};
var t8 = function(){};
console.log("typeof(字串): "+typeof(t1))
console.log("typeof(數字): "+typeof(t2))
console.log("typeof(null): "+typeof(null))
console.log("typeof(undefined): "+typeof(undefined))
console.log("typeof([]): "+typeof(t6))
console.log("typeof({}): "+typeof(t7))
console.log("typeof(function): "+typeof(t8))
if(typeof(t1) === 'string'){
console.log('是字串')
}
</script>
<title></title>
</head>
<body>
</body>
</html>
效果截圖：
寫作不易，讀完如果對你有幫助，感謝點贊支持！
如果你是電腦端，看見右下角的“一鍵三連”了嗎，沒錯點它[哈哈]
加油！
共同努力！
Keafmd
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/206505.html
標籤：其他
下一篇：vue搭建專案