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=)