String
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String</title>
<style>
</style>
</head>
<body>
<script>//String的length屬性,空格也算一個字元,注意,如果字元串中包含雙位元組字元也仍然會按單字元計數,但是特殊符号😊等會算作雙字元
let str = 'hello world';
console.log(str.length); //11
let str1 = '你好，世界';
console.log(str1.length); //5
let str2 = '😊';
console.log(str2.length); //2
//charAt()方法用于傳回給定索引位置的字元,括号裡面的參數由整數指定,不能是負數,傳入負數輸出的是空字元,索引位置的字元如果是特殊符号則傳回�
console.log(str.charAt(0)); //h
console.log(str2.charAt(0)); //�
//charCodeAt()方法用于傳回給定索引位置的字元的字元編碼,括号内傳參由整數指定，傳入負數将輸出NaN
console.log(str.charCodeAt(0)); //104
//concat()方法用于拼接字元串,括号内可以寫多個拼接參數
let h = 'hello';
let w = 'world';
console.log(h.concat(w, '!')); //helloworld!
//比起concat()方法拼接,更加常用的是使用+号拼接
console.log(h + w + '!'); //helloworld!
//三個提取字元串的方法:
//slice()接受一或兩個參數,第一個參數表示字元串開始提取的位置,第二個參數表示字元串結束提取的位置(但是不包含這個結束字元,提取的是在結束位置之前的那個字元)
//隻提供一個參數表示提取到字元串末尾
console.log(str.slice(2)); //llo world
console.log(str.slice(0, 5)); //hello
//當slice()括号内參數有負數時,這些負數都當成字元串長度加上該值
console.log(str.slice(-5, -3)); //wo
//substring()方法也接受兩個參數,使用方法和slice一樣,唯獨當第一個參數和第二個參數出現負數時都會将負數轉換為0
console.log(str.substring(2)); //llo world
console.log(str.substring(0, 5)); //hello
//這裡從索引2位置開始提取,結束位置是個負數,會被轉換成0,就是(2,0),但是substring方法會将較小的參數作為起點,也就等價于(0,2);
console.log(str.substring(2, -3));
//substr()方法第一個參數表示開始提取字元串的位置,第二個參數表示提取多少個字元,當第一個參數為負數當成字元串長度加上該值,第二個值為負數轉換為0
console.log(str.substr(0, 5)); //hello
//substr()與上面兩個方法不同的地方就是他的第二個參數是表示提取多少個字元,是以當第二個參數為負數時,表示提取0個字元,即輸出空字元串
console.log(str.substr(-7, -5)); //""
//查找字元串位置的方法:
//indexOf()括号内傳入要查找的字元串,查找到了将傳回該字元串的索引位置,沒查找到則傳回-1,它的第二個參數表示要從哪個索引位置開始查找
console.log(str.indexOf('o')); //4
console.log(str.indexOf('a')); //-1
console.log(str.indexOf('o', 6)); //7
//lastIndexOf()表示從字元串末尾開始查找,查找到了将傳回該字元串的索引位置,沒查找到則傳回-1,它的第二個參數表示要從哪個索引位置開始從右往左查找
console.log(str.lastIndexOf('o')); //7
console.log(str.lastIndexOf('a')); //-1
console.log(str.lastIndexOf('o', 6)); //4
//例子:找出目标字元串中所有子字元的位置
let str4 = 'abbbacccaddd';
let arr = [];
let str4Idx = str4.indexOf('a');
while (str4Idx > -1) {
arr.push(str4Idx);
str4Idx = str4.indexOf('a', str4Idx + 1);
}
console.log(arr); //[0, 4, 8]
//includes()方法用于搜尋括号内傳入的字元串,查找到了傳回true,沒找到傳回false,他的第二參數表示搜尋的位置
console.log(str.includes('hello')); //true
console.log(str.includes('what')); //false
console.log(str.includes('wor', 4)); //true
//trim()方法用于去除字元串前後的空格,不會去除字元串内的空格
let str5 = ' hello world ';
//沒去除時前後是有空格的
console.log(str5); // hello world
//去除後前後沒有空格
console.log(str5.trim()); //hello world
//repeat()方法用于複制字元,括号内參數表示複制多少次
let str6 = '*';
console.log('省略' + str6.repeat(5)); //省略*****
//padStart()方法用于在字元前填充複制字元,第一個參數表示複制後整個字元串的長度,第二個參數是填充的字元串,但是如果第一個參數的值小于原始字元串的長度,則傳回原始字元串
let str7 = 'foo';
console.log(str7.padStart(4, '*')); //*foo
console.log(str7.padStart(2)); //foo
//padEnd()方法和padStart()方法一緻,就是它是用于在字元後填充複制字元
console.log(str7.padEnd(6, '+')); //foo+++
//字元串大小寫轉換
//toLowerCase()方法用于将字元串轉為小寫
let str8 = 'HELLO WORLD';
console.log(str8.toLowerCase()); //hello world
//toLocaleLowerCase()方法是通用的轉小寫方法,如果不知道代碼涉及什麼語言,最好使用這個通用方法
console.log(str8.toLocaleLowerCase()); //hello world
//toUpperCase();方法用于将字元串轉為大寫
console.log(str.toUpperCase()); //HELLO WORLD
//toLocaleUpperCase();方法是通用的轉大寫方法,如果不知道代碼涉及什麼語言,最好使用這個通用方法
console.log(str.toLocaleUpperCase()); //HELLO WORLD
//replace()方法用于替換字元串中比對到的字元,第一個參數是想要替換字元串中哪個字元,第二個參數就是把那個字元替換成什麼,第一個參數如果是普通字元串的話那麼隻會比對原字元串的第一個子字元串,如果第一個參數是正則,那就按照正則的規則替換
let str9 = 'abc abc abc';
console.log(str9.replace('b', '*')); //a*c abc abc
console.log(str9.replace(/b/g, '*')); //a*c a*c a*c</script>
</body>
</html>
Number
//tofixed()方法用于傳回指定小數點位數的數值字元串，括号裡面寫保留多少位小數,若小數位超過指定的位數則四舍五入
let num = 10;
console.log(num.toFixed(2)); //"10.00"
let num1 = 10.005;
console.log(num1.toFixed(2)); //"10.01"
//toExponential()方法用于傳回科學計數法的數值字元串,括号裡面寫保留多少位小數
let num2 = 20;
console.log(num2.toExponential(1)); //"2.0e+1"
Boolean
//new Boolean()是構造函數，Boolean()是轉換函數
let boo1 = new Boolean(false);
let boo2 = false;
console.log(boo1 instanceof Boolean); //true
console.log(boo2 instanceof Boolean); //false
![web前端布局練手項目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)