charAt()方法和charCodeAt()方法—— 从字符串中选取一个字符

charAt()方法和charCodeAt()方法用于选取字符串中某一位置上的单个字符。对于检查用户输入的有效性,这两个方法也是非常有用的。在第6章介绍HTML表单时,你将看到这两个方法的更多具体应用。

charAt()方法具有一个参数:即所选取字符在字符串中的位置。charAt()方法的返回值就是该位置上的字符。字符串中字符的索引位置从0开始,因此,第一个字符的索引是0,第二个字符的索引是1,依此类推。

例如,要选取一个字符串中最后一个字符,可以使用如下代码:

var myString = prompt("Enter some text","Hello World!");

var theLastChar = myString.charAt(myString.length - 1);

document.write("The last character is " + theLastChar);

上面的第一行代码使用prompt() 函数显示一个提示框,请求用户输入一个字符串,如果用户未输入,则默认值为"Hello World! ",变量myString用于保存prompt()函数返回的字符串。

在上面的第二行代码中,使用charAt()方法获取字符串中的最后一个字符。我们传入charAt()方法的参数是最后一个字符的索引位置:(myString.length–1)。以字符串"Hello World! "为例,这个字符串的长度为12,则最后一个字符的索引为11。这是因为字符串的索引从0开始计算,把字符串的长度减去1就得到最后一个字符的索引。

在上面的第三行代码中,将最后一个字符输出在页面上。

charCodeAt()方法与charAt()方法类似,但它并不返回指定位置上的字符本身,而是返回该字符在Unicode字符集中的编码值。计算机只能理解数字,对于计算机来说,所有字符串都是某种编码的数字。当需要使用的是数字编码所代表的字符,而不是使用数字本身时,计算机将根据编码与字符集的内部对应关系,把每一个编码转换为字符集中相应的字符。

例如,要选取一个字符串中第一个字符的Unicode编码,可以使用如下代码:

var myString = prompt("Enter some text","Hello World!");

var theFirstCharCode = myString.charCodeAt(0);

document.write("The first character code is " + theFirstCharCode);

上面的代码将获取用户输入字符串的第一个字符的Unicode编码,并把编码输出在页面上。

字符是按顺序进行编码的,例如,字符A的编码是65,字符B的编码是66,依此类推。小写字母从97开始编码,即字母a的编码是97,字母b的编码是98,依此类推。数字字符则是从48开始编码,字符0的编码是48,而字符9的编码是57。我们可以使用字符的编码来实现一些功能,例如下面的例子。

在下面这个例子中,我们将使用charCodeAt()方法来检查指定字符串的第一个字符,以确定它是数字、大写字符、小写字符或其他字符:

function checkCharType(charToCheck)

{

var returnValue = "O";

var charCode = charToCheck.charCodeAt(0);

if (charCode >= "A".charCodeAt(0) && charCode <= "Z".charCodeAt(0))

{

returnValue = "U";

}

else if (charCode >= "a".charCodeAt(0) && charCode <= "z".charCodeAt(0))

{

returnValue = "L";

}

else if (charCode >= "0".charCodeAt(0) && charCode <= "9".charCodeAt(0))

{

returnValue = "N";

}

return returnValue;

}

var myString = prompt("Enter some text","Hello World!");

switch (checkCharType(myString))

{

case "U":

document.write("First character was upper case");

break;

case "L":

document.write("First character was lower case");

break;

case "N":

document.write("First character was a number");

break;

default:

document.write("First character was not a character or a number");

}

在文本编辑器中输入上面的代码,并保存为ch4_examp1.htm。

在浏览器中打开该页面,将会提示你输入一个字符串。在输入了字符串后,该程序将在页面上显示所输入字符串的第一个字符的类型信息—— 即该字符是大写字符、小写字符、数字、或其他的字符,如标点符号。

代码解说

在上面示例的开始,首先定义了一个将在页面代码中使用的函数checkCharType()。在该函数中,首先定义了变量returnValue并将它初始化为"O",以表示除大写字符、小写字符、数字之外的其他字符。

function checkCharType(charToCheck)

{

var returnValue = "O";

变量returnValue将作为函数的返回值返回给调用方,它包含了代表字符类型的数据。它将用U代表大写字母、L代表小写字母、N代表数字字符,而O代表其他字符。

在接下来的一行代码中,使用charCodeAt()方法获取参数charToCheck中的字符串首字符的编码。charToCheck正是该函数唯一的参数。首字符的编码将保存在变量charCode中。

var charCode = charToCheck.charCodeAt(0);

在接下来的代码中,使用了一系列的if语句,用于检查首字符的编码包含在哪一个编码期中。如果首字符的编码在字符A和字符Z的编码之间,则它是一个大写字符,就把变量returnValue的值设置为U。如果首字符的编码在字符a和字符z的编码之间,则它是一个小写字符,就把变量returnValue的值设置为L。如果首字符的编码在字符0和字符9的编码之间,则它是一个数字字符,就把变量returnValue的值设置为N。否则,如果首字符的编码不属于以上任何一个范围,则使变量returnValue保持初始值O,来表示除大写字符、小写字符、数字之外的其他字符。

if (charCode >= "A".charCodeAt(0) && charCode <= "Z".charCodeAt(0))

{

returnValue = "U";

}

else if (charCode >= "a".charCodeAt(0) && charCode <= "z".charCodeAt(0))

{

returnValue = "L";

}

else if (charCode >= "0".charCodeAt(0) && charCode <= "9".charCodeAt(0))

{

returnValue = "N";

}

上面这段代码看起来有点怪异,我们来仔细地看一看JavaScript是如何处理的。对于如下语句:

"A".charCodeAt(0)

字符串字面值"A"是一个基本数据类型的字符串,而不是一个对象。上面这行代码将字符串字面值"A"作为一个String对象来使用,并调用了String对象的charCodeAt()方法。JavaScript将理解这个操作的含义,并把字符串字面值"A"转换为一个临时的String对象,该对象中包含了字符串"A"。在此之后,JavaScript将通过这个自动创建的临时String对象来执行 charCodeAt()方法。当charCodeAt()方法执行完毕,这个临时的String对象就会被释放掉。上面这行代码可以被视为是下面代码的一种简写形式:

var myChar = new String("A");

myChar.charCodeAt(0);

无论采用何种形式,都将返回首字符的Unicode编码。即"A".charCodeAt(0)将返回字符"A"的Unicode编码65。

在函数的最后,使用return语句将变量returnValue作为返回值返回给调用方。

return returnValue;

}

也许你会奇怪,为什么我们不直接返回代表类别的字符,而要使用一个变量returnValue呢?例如,可以将上面的代码改写为如下代码:

if (charCode >= "A".charCodeAt(0) && charCode <= "Z".charCodeAt(0))

{

return "U";

}

else if (charCode >= "a".charCodeAt(0) && charCode <= "z".charCodeAt(0))

{

return "L";

}

else if (charCode >= "0".charCodeAt(0) && charCode <= "9".charCodeAt(0))

{

return "N";

}

return "O";

这段代码仍然能正常运行,但为什么我们不采用这种方式呢?这种方式的缺点就是在一个函数中使用了多个return语句,这使得函数的执行流难于跟踪。对于一个较小的函数来说,这可能并不是什么大问题,但对于一个较复杂的函数来说,就可能变成一个棘手的问题。采用第一种方式的代码,在函数结束前只有一个唯一的return语句,我们可以非常准确地知道函数将在这个return语句后结束。而对于第二个版本的函数,它具有4个return语句,因此函数可能在任何一个可达的return语句之后结束。这样,函数将具有4个可能的出口和返回位置。这使得对函数中执行流的判断更加麻烦。

在页面的代码中,我们使用了一些语句来测试函数checkCharType()的功能。首先,用变量myString来作为用于测试的字符串,这个字符串是用户在prompt()提示框中输入的,或者是prompt()函数的默认值"Hello World!"。

var myString = prompt("Enter some text","Hello World!");

接下来,把函数checkCharType()作为switch语句的比较表达式。根据checkCharType()函数的返回值,某一个case语句的条件将被匹配,case语句之后的代码将被执行,并将字符的类型信息显示给用户。

switch (checkCharType(myString))

{

case "U":

document.write("First character was upper case");

break;

case "L":

document.write("First character was lower case");

break;

case "N":

document.write("First character was a number");

break;

default:

document.write("First character was not a character or a number");

}

这个例子到这里就结束了,但是值得注意的是,这仅仅是一个例子—— 为了演示charCodeAt()函数用法的例子。在实际编程中,可以使用更简洁的方法,即可以用如下代码:

if (char >= "A" && char <= "Z")

代替例子中使用的代码:

if (charCode >= "A".charCodeAt(0) && charCode <= "Z".charCodeAt(0))

本文来源:转载

charat转数字方法html,charAt()方法和charCodeAt()方法相关推荐

  1. charAt()方法和charCodeAt()方法—— 从字符串中选取一个字符.

    charAt() 方法和charCodeAt () 方法用于选取字符串中某一位置上的单个字符.对于检查用户输入的有效性 ,这两个方法也是非常有用的. charAt() 方法具有一个参数 :即所选取字符 ...

  2. 面向对象开发方法,Coad方法、Booch方法和OMT方法及UML

    目前,面向对象开发方法的研究已日趋成熟,国际上已有不少面向对象产品出现.面向对象开发方法有Coad方法.Booch方法和OMT方法等. (1).Booch方法 Booch最先描述了面向对象的软件开发方 ...

  3. 【系统分析师之路】面向对象开发方法,Coad方法、Booch方法和OMT方法及UML

    [系统分析师之路]面向对象开发方法,Coad方法.Booch方法和OMT方法及UML 目前,面向对象开发方法的研究已日趋成熟,国际上已有不少面向对象产品出现.面向对象开发方法有Coad方法.Booch ...

  4. notify()方法、notifyAll()方法和wait()方法 详解

    线程作为程序内部的多个执行流,相互之间是可以通讯的.线程间通讯可以通过多种方式来进行,例如:线程间可以共享变量来进行通讯,使每个线程根据共享变量的值进行操作和运算,当通过共享变量进行通讯时,通常需要引 ...

  5. notify()方法、notifyAll()方法和wait()方法

    线程作为程序内部的多个执行流,相互之间是可以通讯的.线程间通讯可以通过多种方式来进行,例如:线程间可以共享变量来进行通讯,使每个线程根据共享变量的值进行操作和运算,当通过共享变量进行通讯时,通常需要引 ...

  6. swiper 定义放多少张图片,小程序swiper轮播图,自定义样式,两种方法:原生方法和bindchange方法;将点点改为数字(当前第几张 /总共几张);点击点点跳转当前图片...

    一.点点部分 1.1.通过原生方法 (1)wxml文件 (2)wxss /* 轮播图部分 */ .swiperBar { width: 690rpx; height: 337rpx; margin: ...

  7. PDO中错误处理:errorCode方法和errorInfo方法

    在PDO中,有两个获取程序中错误信息的方法:errorCode方法和errorInfo方法. 1.errorCode方法 errorCode方法用于获取在操作数据库句柄时所发生的错误代码,这个错误代码 ...

  8. JS中的call()方法和apply()方法用法总结

    1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法. 2. 相同点:这两个方法的作用是一样的. 都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖 ...

  9. Keras中predict()方法和predict_classes()方法的区别

    正如上篇博客中所讲,在Keras框架下执行深度学习任务时,一般会先根据训练数据集训练出模型,然后拿训练好的模型到生产环境(测试集)中部署并生产.以分类问题为例,当训练好了分类模型之后,我们要用这个模型 ...

最新文章

  1. LeetCode题目:两数之和2
  2. Nodejs的express使用教程
  3. c语言sleep_编程代码:用C语言来实现下雪效果,这个冬天,雪花很美
  4. 一条SQL语句在MySQL中是如何执行的
  5. C#中读写Xml配置文件常用方法工具类
  6. wifi共享大师电脑版_手机也能给电脑上网!WiFi热点已经out了,蓝牙USB线也能共享网络...
  7. 2.页面布局示例笔记
  8. ES2020的新特性解读
  9. java vector编程_Java编程开发中向量(Vector)及其应用
  10. 计算机辅助电话调查系统,基于XML题型定制的计算机辅助电话调查系统问卷设计与实现...
  11. win10引导安卓x86_实用教程,教你如何安装Win10+安卓双系统
  12. 可编程渲染管线(SRP)_学习笔记
  13. Elasticsearch docker中搭建ES服务集群,ik中文分词器,使用Kibana操作ES 搜索 spring Data Elasticsearch-增删改查API
  14. python爬去百度图片_python爬虫之爬取百度图片
  15. js中获取阳历,阴历日期节日自动更换背景
  16. UWP 学习笔记 二
  17. 哪款蓝牙耳机音质好?内行推荐四款高音质蓝牙耳机
  18. 解答:为什么要搭建企业论坛?如何快速搭建?
  19. 2021蓝桥杯省赛b题解
  20. 广州蓝景分享—Web前端开发培训机构如何选择

热门文章

  1. 《镇魂街:天生为王》— 这条街,由UWA共同守护
  2. 中学家长会主题班会PPT模板
  3. 朋友圈计算机代码,微信小程序仿朋友圈代码
  4. 【openWrt】安装后进行定制
  5. DOM编程-全选、全不选和反选
  6. 四年后看微软第二代超融合系统:Azure Stack HCI
  7. 每一次分手都是心灵的修复
  8. android 自定义searchview,android自定义view--SearchView
  9. React 设计思想
  10. ATM-简单SQL查询