本文通过具体代码示例,系统梳理了JavaScript中的Boolean、Number和String三种基础数据类型。重点解析了Number对象的进制转换、toFixed及toExponential格式化方法,以及String对象中涉及字符访问、子串截取、位置查找、大小写转换、替换匹配和字符串比较的常用API,旨在帮助开发者掌握基础类型的使用规范与技巧。
JavaScript基础数据类型概述
此前已介绍过JavaScript的数据类型,本节将通过具体代码示例进行复习,以加深理解并拓展应用。
代码示例如下:
Number类型与字符串转换方法<script type="text/javascript">
//1、Boolean 类型
//2、Number 类型
//3、String 类型
Boolean类型容易与基本类型混淆,因此建议始终避免使用Boolean对象。
Number是与数字值对应的引用类型。
var numberObj = new Number(10);
重写toString方法,传入的参数用于指定返回几进制数字的字符串类型。
var num = 10;
alert(num.toString());//"10"
alert(num.toString(2));//"1010"
alert(num.toString(8));//"12"
alert(num.toString(10));//"10"
alert(num.toString(16));//"a"
toFixed()方法用于返回指定小数位数的数值字符串表示,具备四舍五入功能。
var num = 10;
num.toFixed(2);//"10.00"
toExponential()为指数表示法方法,接受一个参数以指定输出结果中小数的位数。
var num = 10;
alert(num.toExponential(1));//"1.0e+1"
对于较小的数值,通常无需使用指数表示法。若需获取数值最合适的格式,应使用
toPrecision()方法,该方法可能返回固定大小(fixed)格式,也可能返回指数(exponential)格式。
它接受一个参数,表示数值所有数字的位数(不包括指数部分)。
var num = 99;
alert(num.toPrecision(1));//1e+2,1e+2表示100,因为指数无法表示99所以向上舍入变成100
alert(num.toPrecision(2));//"99"
alert(num.toPrecision(3));//"99.0"
String对象的方法同样可以在所有基本字符串中访问。
String对象常用操作方法详解//1、字符操作方法:charAt()、charCodeAt()。每个参数都接受一个基于位置0的字符位置
var stringValue = "Hello world!";
stringValue.charAt(1);//"e" 第二个位置是“e”
stringValue.charCodeAt(1);//"101" 第二个位置“e”的字符编码是“101”
//2、字符串操作方法concat(拼接的字符)、slice(index,index)、substring(index,index)、substr(index,length)。index:位置,length:长度
var str1 = "hello";
alert(str1.concat(" word"));//Hello world
alert(str1.concat(" word", "!"));//Hello world!
var stringValue = "Hello world!";
alert(stringValue.slice(3));//lo world
alert(stringValue.substring(3));//lo world
alert(stringValue.substr(3));//lo world
alert(stringValue.slice(3, 7));//lo w
alert(stringValue.substring(3, 7));//lo w
alert(stringValue.substr(3, 7));//lo worl 这个7代表截取的长度
//3、字符串位置方法 indexOf() 和 lastIndexOf()
这两个方法均从指定字符串中搜索给定字符串,返回其位置,若未找到则返回-1。
两者的区别在于:一个从字符串开头向后搜索,另一个从字符串末尾向前搜索。
这两个方法均包含一个可选参数,用于指定开始搜索的位置。
var stringValue = "hello word";
alert(stringValue.indexOf("o"));//4
alert(stringValue.lastIndexOf("o"));//7
可以通过循环调用indexOf或lastIndexOf来查找所有指定的字符串。
var stringValue = "wo de wei lai bu shi meng!wo men you geng hao de ming tian!";
var positions = [];
var pos = stringValue.indexOf("e");
while (pos > -1) {
positions.push(pos);
pos = stringValue.indexOf("e", pos + 1);
}
alert(positions);//4、7、22、33、38、47
//4、trim()这个方法会创建一个字符串副本,删除前置及后置的所有空格。
var stringValue=" hello word ";
alert(stringValue);
alert(stringValue.trim());
//5、字符串大小写转换方法
toLowerCase、toLocalLowerCase、toUpperCase、toLocalUpperCase
var stringValue="hello word";
alert(stringValue.toLocaleUpperCase());//此方法比较稳妥
alert(stringValue.toUpperCase());
alert(stringValue.toLocaleLowerCase());//此方法比较稳妥
alert(stringValue.toLowerCase());
//6、字符串匹配方法 replace()
该方法接受两个参数:第一个参数为正则表达式或字符串,第二个参数为字符串或函数。
var text="cat,bat,sat,fat";
var result=text.replace("at","ond");//
alert(result);//"cond,bond,sond,fond"
var result=text.replace(/at/g,"ond");//
alert(result);//"cond,bond,sond,fond"
var text="cat,bat,sat,fat";
result=text.replace(/(.at)/g,"word ($1)");
alert(result);
//replace的第二个参数也可以是一个函数
function htmlEscape(text) {
//函数有是三个参数:1、模式匹配项 2、模式匹配项在字符中的位置 3、原始字符串
return text.replace(/[<>"&]/g,function(match,index,text){
switch (match){
case "<":
return "<";
case ">":
return ">";
case "&":
return "&";
case "\"":
return """;
}
});
}
alert(htmlEscape("<p class=\"greeting\">Hello World!</p>"));
//<p class="greeting">Hello World!</p>
//localCompare()比较两个字符串。A.localCompare("B")
//如果字符串(A)在字母表中排在字符串参数(B)之前,这返回负数(-1)
//如果字符串等于字符串参数则返回0
//如果字符串(A)在字母表中排在字符串参数(B)之后则返回正数(1)
var stringValue="f";
alert(stringValue.localeCompare("d"));//1
alert(stringValue.localeCompare("f"));//0
alert(stringValue.localeCompare("z"));//-1
//fromCharCode 这个静态方法是与charCodeAt执行相反的操作
alert(String.fromCharCode(104,101,108,108,111));//"hello"
//7、html方法建议不要使用。
</script>
END
希望读者通过上述示例,对JavaScript的数据类型有了更深入的认识。