第3章 实用的JavaScript函数
3.1 字符串处理
字符串是程序设计时不可缺少的组成部分，本节将结合实例对字符串处理的相关技术进行介绍。
实例057 小写金额转换小写金额转换为大写金额
本实例是一个提高效率、人性化的程序
实例位置：光盘\mingrisoft\03\057
实例说明
在开发财务软件或与金融相关的软件时，经常会遇到的一个问题就是金额的大小写转换。当用户在进行账目输入时，常采用输入小写金额的形式，众所周知，使用小写金额存在一个最大的问题就是它容易被篡改，这对于金融系统来说是不安全的，解决这种问题的方法就是直接将用户输入的小写金额转换为大写金额。运行程序，在“请输入小写金额”的文本框中输入所要转换的小写金额后，单击“转换”按钮，在“转换后的大写金额”文本框中将显示转换后的结果，如图3.1所示。
图3.1 小写金额转换为大写金额
技术要点
实现将小写金额转换为大写金额的自定义JavaScript函数的思路如下。
（1）将大写的数字和单位分别保存在两个字符串中。
（2）去除用户输入的小写金额中的小数点。
（3）根据用户输入的小写金额的长度取出该字符串所用到的单位。
（4）取出小写字符对应的大写字符，并与单位组合成新的字符串，同时，还需要对小写金额中存在连续多个0的情况进行处理。
在本实例中主要应用了JavaScript的String对象的substr()方法和length属性。下面对substr()方法和length属性进行介绍。
（1）substr()方法用于返回一个从指定位置开始的指定长度的子字符串，其语法格式如下：
string.substr(start,length)
参数说明：
● start：指定要获取的子字符串的起始位置。如果是一个负数，表示从字符串的尾部开始计算起始位置。即当start的值为-1时，表示最后一个字符。
● length：指定子字符串中的字符个数。如果省略该参数将返回从start开始到字符串结尾的子串。
（2）length属性用于获取字符串字符的个数，其语法格式如下：
string.length
注意：String对象的length属性是一个只读的整数，使用该属性时，一个汉字被认为是一个字符。而对于一个字符串，它最后一个字符的下标是其length属性值−1。
实现过程
（1）首先，对用户输入的小写金额的合法性进行判断，然后对合法数据的小数位数进行控制，使其保留两位小数，再调用自定义的JavaScript函数将小写金额转换为大写金额，最后将转换后的值赋给“转换后的大写金额”文本框。代码如下：
<script language="javaScript">
function convert(str){
if(str==""){
alert("请输入金额！");form1.money.focus();return;
}
if(isNaN(str)){
alert("您输入的金额不合法!");return;
}
if(str>999999999999){ //判断输入的数字是否有效
alert("您输入的金额不能大于999999999999!");return;
}
//将小数点后保留两位小数
if(str.indexOf(".")>0){
var decimal=str.length-str.indexOf(".")-1;
if(decimal>2){
str=str.substr(0,str.length+2-decimal);
}
}
value=change(str); //调用自定义函数转换
form1.moneyok.value=value; //将转换后的值赋给"转换后的大写金额"文本框
}
</script>
（2）将小写金额转换为大写金额的自定义函数change()的代码如下：
<script language="javaScript">
function change(str){
je="零壹贰叁肆伍陆柒捌玖";
cdw="万仟佰拾亿仟佰拾万仟佰拾元角分";
var newstring=(str*100).toString();
newstringlog=newstring.length; //获取输入小写金额的位数
newdw=cdw.substr(cdw.length-newstringlog);
num0=0;
wan=0;
dxje="";
for(m=1;m<newstringlog+1;m++){
xzf=newstring.substr(m-1,1); //取出小写金额
dzf=je.substr(xzf,1); //取出大写金额
dw=newdw.substr(m-1,1); //取出单位
if(dzf=="零"){
dzf="";
if(dw=="亿"){
}else if(dw=="万"){ //处理字符“万”
dzf=""
wan=1
}else if(dw=="元"){ //处理字符“元”
}else{
dw="";
}
num0=num0+1;
}else{
if(num0-wan>0){
dzf="零"+dzf; //处理字符“零”
}
num0=0;
}
dxje=dxje+dzf+dw;
}
if (newstring.length!=1){
if(newstring.substr(newstring.length-2)=="00"){
dxje=dxje+"整";
}else{
dxje=dxje;
}
}
return dxje;
}
</script>
举一反三
根据本实例，读者可以：
实现销售单中销售金额的大小写转换；
实现商品入库单中金额的大小写转换。
实例058 将数字字符串格式化为指定长度
本实例是一个提高规范化的程序
实例位置：光盘\mingrisoft\03\058
实例说明
在网站开发过程中，经常会用到将数字格式化为指定长度的字符串的情况，如果不足指定位数时，在该数字的前面用0填充，例如，要显示今天日期（假设今天为“2009-03-15”）时，使用Date对象的相应方法只能显示类似“2009-3-15”的字符串，所以需要将月份格式化为指定长度。为此笔者编写一个将数字字符串格式化为指定长度的函数，并将其制作为一个实例，运行本实例。首先在“请输入要格式化的数字”文本框中输入6，然后在“请输入格式化后字符串的长度”文本框中输入2，最后单击“转换”按钮后，在“格式化后的字符串”文本框中将显示“06”，如图3.2所示。
图3.2 将数字字符串格式化为指定长度
技术要点
要实现将数字字符串格式化为指定长度需要应用for循环语句和String对象的length属性。String对象的length属性的详细介绍请参见实例057。下面介绍for循环语句。
for语句是JavaScript语言中应用比较广泛的条件语句。通常，for语句使用一个变量作为计数器来执行循环的次数，这个变量就称为循环变量。for语句的语法格式如下：
for(循环变量赋初值;循环条件;循环变量增值){
循环体;
}
● 循环变量赋初值：是一条初始化语句，用来对循环变量进行初始化赋值。
● 循环条件：是一个包含比较运算符的表达式，用来限定循环变量的边限。如果循环变量超过了该边限，则停止该循环语句的执行。
● 循环变量增值：用来指定循环变量的步幅。
for语句可以使用break语句来中止循环语句的执行。break语句默认情况下是终止当前的循环语句。
实现过程
（1）编写将数字字符串格式化为指定长度的JavaScript自定义函数formatNO()，该函数有两个参数分别是str（要格式化的数字）和len（格式化后字符串的长度），返回值为格式化后的字符串。代码如下：
<script language="javascript">
function formatNO(str,len){
var strLen=str.length; //获取输入的数字字符串的长度
for(i=0;i<len-strLen;i++){
str="0"+str; //对字符串进行前补0
}
return str;
}
</script>
（2）编写JavaScript自定义函数deal()，用于在验证用户输入信息后，调用formatNO()函数将指定数字格式化为指定长度。具体代码如下：
<script language="javascript">
function deal(){
if(form1.str.value=="")
{alert("请输入要格式化的数字！");form1.str.focus();return false;}
if(isNaN(form1.str.value)){
alert("您输入的数字不正确!");form1.str.focus();return false;
}
if(form1.le.value=="")
{alert("请输入格式化后字符串的长度！");form1.le.focus();return false;}
if(isNaN(form1.le.value)){
alert("您输入的格式化字符串的长度不正确!");form1.le.focus();return false;
}
form1.lastStr.value=formatNO(form1.str.value,form1.le.value);
}
</script>
（3）在页面的合适位置添加“转换”按钮，在该按钮的onClick事件中调用deal()函数将指定的数字格式化为指定长度，代码如下：
<input name="Submit" type="button" class="btn_grey" onClick="deal();" value="转换">
举一反三
根据本实例，读者可以：
实现自动编号中的格式化编号为指定位数；
实现在显示长日期格式的日期时，将月份或日格式化为指定位数。
实例059 将RGB格式的颜色值转换为十六进制
本实例是一个提高规范化的程序
实例位置：光盘\mingrisoft\03\059
实例说明
在网站开发过程中，经常会用到将RGB格式的颜色值转换为十六进制格式的情况，例如，在实现文字动态变色时，就需要使用该方法将RGC值转换为十六进制格式。为此笔者编写了一个将RGB格式的颜色值转换为十六进制格式的函数，并将其制作为一个实例。运行本实例，首先在“R”文本框中输入12，在“G”文本框中输入5，在“B”文本框中输入66，然后单击“转换”按钮，在“格式化后的十六进制的颜色值”文本框中将显示转换后的颜色值“#b407b1”，如图3.3所示。
图3.3 将RGB格式的颜色值转换为十六进制
技术要点
本实例主要应用parseInt()方法和Number对象的toString()方法实现。下面将对parseInt()方法和Number对象的toString()方法进行详细介绍。
（1）parseInt()方法。
parseInt()方法用于将非数字的原始值转换成整数，该方法有两种模式，即默认模式和基模式。下面分别介绍。
在默认模式下，parseInt()方法首先查看位置0处的字符，判断它是否为有效数字，如不是，将返回NaN，不再继续执行检查，否则将查看位置1，进行检查，依次类推，直到发现非有效数字为止，此时parseInt()方法将把第一个发现的非有效数字前面的有效字符转换成整数。例如：
parseInt("8007wgh"); //返回结果为8007
parseInt("8007wgh666"); //返回结果为8007
parseInt("wgh666"); //返回结果为NaN
parseInt("0xE"); //返回结果为14
parseInt("3.14"); //返回结果为3
采用基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。其语法格式如下：
parseInt(str,basic)
参数说明：
● str：表示要转换的原始字符串。
● basic：表示基，用于指定要转换字符串采用的基数，二进制的基为2，八进制的基为8，十进制的基为10，十六进制的基为16。
例如：
parseInt("11",2); //返回结果为3
parseInt("11",8); //返回结果为9
parseInt("11",10); //返回结果为11
parseInt("11",16); //返回结果为17
（2）Number对象的toString()方法。
Number对象的toString()方法用于将数值转换为字符串，该方法有两种模式，即默认模式和基模式。下面分别介绍。
采用默认模式，toString()方法只是将指定的字符串转化为相应的十进制的数字值（无论是整数、浮点数还是科学记数法）。
说明：二进制的基为2，八进制的基为8，十进制的基为10，十六进制的基为16。
采用基模式，可以用不同的基数输出数字，例如：
var myNum=11;
myNum.toString(2); //返回结果为1011
myNum.toString(8); //返回结果为13
myNum.toString(10); //返回结果为11
myNum.toString(16); //返回结果为b
基模式对于HTML中处理数字时非常有用，在HTML中采用十六进制表示每种颜色，如#FF0000表示红色，本实例中应用的就是这种模式。
注意：在本实例中需要调用自定义函数formatNO()将不足两位的R或G或B的值格式化为2位，不足位置补0，formatNO()函数的具体代码请参见实例058。
实现过程
（1）编写将RGB格式的颜色值转换为十六进制格式的JavaScript自定义函数convert()，该函数有3个参数分别是r（RGB颜色中的红色值）、g（RGB颜色中的绿色值）和b（RGB颜色中的蓝色值），返回值为转换后的十六进制颜色值。代码如下：
<script language="javascript">
function convert(r,g,b){
if(isNaN(r)||255-r<0){ //当r的值大于255或不为数字时
r=0;
}
if(isNaN(g)||255-g<0){ //当g的值大于255或不为数字时
g=0;
}
if(isNaN(b)||255-b<0){ //当b的值大于255或不为数字时
b=0;
}
var hr=formatNO(parseInt(r).toString(16),2); //将R的值转换为16进制
var hg=formatNO(parseInt(g).toString(16),2); //将G的值转换为16进制
var hb=formatNO(parseInt(b).toString(16),2); //将B的值转换为16进制
var result="#"+hr+hg+hb; //组合RGB的值
return result; //返回转换后的值
}
</script>
（2）编写JavaScript自定义函数check()，用于在验证用户输入信息是否合法，具体代码如下：
<script language="javascript">
function check(obj){
var Expression=/^[0-9]+(\d*$)/; //定义正则表达式
var objExp=new RegExp(Expression); //创建正则表达式对象
if(objExp.test(obj.value)==false || 255-obj.value<0 ){
alert('要求输入0-255之间的整数!');
obj.focus(); //让obj获取焦点
}
}
</script>
（3）编写JavaScript自定义函数deal()，调用convert()函数将转换后的字符串显示在指定文本框中，具体代码如下：
<script language="javascript">
function deal(){
var r=form1.str1.value; //获取R的值
var g=form1.str2.value; //获取G的值
var b=form1.str3.value; //获取B的值
form1.lastStr.value=convert(r,g,b); //调用convert()函数
}
</script>
（4）在页面的合适位置添加“转换”按钮，在该按钮的onClick事件中调用deal()函数将RGB格式的颜色值转换为十六进制格式，代码如下：
<input name="Submit"type="button"class="btn_grey"onClick="deal();"value="转换">
举一反三
根据本实例，读者可以：
实现彩色渐变文字动画；
实现表格或页面背景循环变色。