赵工的个人空间


网络课堂部分转网页计算部分转编程演练

 网页编程轻松学

首页 > 网络课堂 > 网页编程轻松学 > JavaScript操作字符串
JavaScript操作字符串
字符串是JavaScript中经常要用到的,页面表单的输入输出,基本都是字符串的形式,也经常需要读取字符串中的部分字串、判断是否存在某个子串、按某种规则转换成数组等。

1. JavaScript的内置String对象的创建:
JavaScript提供了内置的String对象用于字符串处理,其中包括一个length属性表示字符串的长度。
创建一个字符串,可以使用new,也可以直接将字符串值赋给变量:
newstring="This is a new string."
newstring= new String("This is a new string.")
以上两种方法是等价的。还可以创建HTML格式的字符串,即带有特定标记的,一般有以下几种:
1)anchor(anchor):创建HTML命名锚点
示例:
var txt="Hello world!"
document.write(txt.anchor("myanchor"))      //<a name="myanchor">Hello world!</a>
2)link(url):创建一个超链接
示例:
var txt="w3school"
document.write(str.link("http://www.w3school.com.cn"))      //<a link="http://www.w3school.com.cn"> w3school </a>
3)big():创建一个大号字体HTML格式字符串,格式<big>string</big>
示例:
var str="Hello world!""
document.write(str.big())      //<big>Hello world!</big>
4)blink():创建一个闪动的HTML格式字符串,格式<blink>string</blink>
5)bold():创建一个粗体HTML格式字符串,格式<b>string</b>
6)fixed():创建一个打字机字体HTML格式字符串,格式<tt>string</tt>
7)fontcolor(color):创建一个指定颜色的HTML格式字符串,格式<font-color=color>string</font-color>
其中color必须是颜色名(如red)、RGB 值(如rgb(255,0,0))或者十六进制数(如#FF0000)。
8)fontsize(size):创建一个指定尺寸的HTML格式字符串,格式<font-size=6>string</font-size>
其中size必须为1到7的数值。
9)italics():创建一个斜体HTML格式字符串,格式<i>string</i>
10)small():创建一个小号字HTML格式字符串,格式<small>string</small>
11)strike():创建一个删除线HTML格式字符串,格式<strike>string</strike>
12)sub():创建一个下标HTML格式字符串,格式<sub>string</sub>
13)sup():创建一个上标HTML格式字符串,格式<sup>string</sup>

2. String对象的常用方法:
String对象提供了很多方法,便于对字符串进行各种处理:
1)charAt(index)方法:返回字符串指定索引位置处的字符,第一个字符的索引为0
示例:
var str="Hello world!";
console.log(str.charAt(1));      //'e'

2)charCodeAt(index)方法:返回字符串给定索引处的字符的Unicode代码值,返回值是 0 - 65535 之间的整数
如果index是负数,或大于等于字符串的长度,则 charCodeAt() 返回 NaN。示例:
var str="Hello world!";
console.log(str.charCodeAt(1));      //101

3)formCharCode(numX,numX,...,numX)方法:接受一个或多个指定的Unicode值,然后返回一个字符串
该方法是String的静态方法。示例:
console.log(String.fromCharCode(72,69,76,76,79));      //'HELLO'

4)indexOf(searchvalue,fromindex)方法:返回某个指定的字符串值在字符串中首次出现的位置,找不到返回-1
示例:
var str="Hello world!";
console.log(str.indexOf("world"));      //6

5)lastIndexOf(searchvalue,fromindex)方法:返回子字符串在字符串中指定开始点前最后一次出现的位置
示例:
var str="Hello world!";
console.log(str.lastIndexOf("world"));      //6

6)concat(stringX,stringX,...,stringX)方法:组合多个字符串文本并返回新的字符串,不过实用中更多使用+号
示例:
var str1="Hello "
var str2="world!"
console.log(str1.concat(str2));      //'Hello world!'

7)localeCompare(target)方法:本地特定的顺序来比较两个字符串,返回整数形式的结果
示例:
var str;
str.sort (function(a,b){return a.localeCompare(b)});

8)match(searchvalue)方法:查找比较字符串并返回存放匹配结果的数组,可以使用正则表达式
示例:
var str="Hello world!"
console.log(str.match("world!"));      //'world!'

9)replace(substr,replacement)方法:用于在字符串中用一些字符替换另一些字符,可以使用正则表达式
示例:
var str="Visit Microsoft!"
console.log(str.replace("Microsoft", "W3School"));      //'Visit W3School!'
此方法最常见的是使用正则表达式。

10)search(substr)方法:检索字符串中指定的子字符串,可以使用正则表达式
示例:
var str="Visit Microsoft!"
console.log(str.search("Microsoft"));      //6

11)slice(start,end)方法:提取字符串的一部分,并作为新字符串返回
其中start为要抽取的片断的起始下标,如果是负数则是从字符串的尾部开始算起的位置;end为紧接着要抽取的片段的结尾的下标,若未指定则要提取到原字符串结尾,如果是负数则是从字符串的尾部开始算起的位置。
示例:
var str="Hello happy world!"
console.log(str.slice(6,11));      //'happy'

12)split(separator,howmany)方法:把字符串分隔成子字符串组成的数组
其中separator表示从该位置分割,返回的数组不包含separator字符本身,可使用正则表达式;howmany可选,表示可指定返回的数组的最大长度。
示例:
var str="How are you doing today?"
console.log(str.split(" ",3));      //['How','are','you']
"2:3:4:5".split(":")      //["2", "3", "4", "5"]
"hello".split("")      //["h", "e", "l", "l", "o"]
var words = sentence.split(' ')      //英文句子分割为单词

13)substring(start,stop)方法:提取字符串中从start处到stop-1处之间的字符,不能使用负值
示例:
var str="Hello world!"
console.log(str.substring(3,7));      //'lo w'

14)substr(start,len)方法:返回一个从指定位置开始的指定长度的子字符串,不建议使用
示例:
var str="Hello world!"
console.log(str.substr(3,7));      //'lo worl'

15)toLowerCase()方法:返回一个字符串,其中的字母被转换为小写字母
16)toUpperCase()方法:返回一个字符串,其中的字母被转换为大写字母
17)toLocaleLowerCase()方法:把字符串转换成区域化形式,并将字符串转换成小写
18)toLocaleUpperCase()方法:把字符串转换成区域化形式,并将字符串转换成大写
19)toString()方法:用于将其他对象,如数组、日期、数值、布尔值等对象返回String对象
20)valueOf()方法:返回String对象的初始值,一般是后台自动调用
21)toJSON()方法:序列化为JSON格式字符串

3.ES6新增的String方法:
1)includes(searchvalue, start)方法:如果字符串中检测到指定子串则返回true,否则返回false
2)startsWith(searchvalue, start)方法:如果在字符串的起始位置检测到指定子串则返回true,否则返回false
3)endsWith(searchvalue)方法:如果在字符串的结束部分检测到指定子串则返回true,否则返回false
4)repeat(number)方法:接受一个number参数,表示该字符串的重复次数,返回值为当前字符串重复一定次数后的新字符串。
示例:
var str = "abc";
console.log(str.repeat(2));      //'abcabc'

4.JavaScript使用Unicode编码:
Unicode编码的目标是为全世界每一个字符提供全球唯一的标识符,使用32bit编码。ES6强制使用UTF-16字符串编码,前2**16个码位均以16位的编码单元表示,这个范围被称为基本多文种平面BMP(Basic Multilingual Plane);超出这个范围的码位则要归属于某个辅助平面supplementary plane,其中的码位仅用16位就无法表示了,引入代理对surrogate pair,规定用两个16位编码单元表示一个码位。
对于辅助平面中的字符,text.length的值为2,而BMP平面的字符则为1。而且还会造成相应的正则表达式、charAt()和charCodeAt()方法返回值都出现异常。

1)codePointAt()方法:这是测试一个字符由两个字节还是由四个字节组成的最简单方法,如果其值大于0xFFFF,就是由两个编码单元来表示,总共有32位。
对于BMP字符集中的字符,codePointAt()方法的返回值与charCodeAt()方法的相同。对于非BMP字符,codePointAt()方法返回完整的码位,即使这个码位包含多个编码单元。

2)fromCodePoint()方法:可以使用fromCodePoint()方法根据指定的码位生成一个字符。
对于BMP字符,fromCodePoint()方法与ES6的fromCharCode()方法结果相同;对非BMP码位,二者执行结果不同。

3)normalize()方法:用于处理一些欧洲语言字母,不能用于中文
许多欧洲语言有语调符号和重音符号。为了表示它们,Unicode 提供了两种方法。一种是直接提供带重音符号的字符,比如ǒ(\u01D1)。另一种是提供合成符号(combining character),即原字符与重音符号的合成,两个字符合成一个字符,比如O(\u004F)和ˇ(\u030C)合成ǒ(\u004F\u030C)。这两种表示方法,在视觉和语义上都等价,但是 JavaScript 不能识别。
ES6 提供字符串实例的normalize()方法,用来将字符的不同表示方法统一为同样的形式,这称为 Unicode 正规化。normalize方法可以接受一个参数来指定normalize的方式,参数的四个可选值如下:
NFC,默认参数,表示“标准等价合成”(Normalization Form Canonical Composition),返回多个简单字符的合成字符。
NFD,表示“标准等价分解”(Normalization Form Canonical Decomposition),即在标准等价的前提下,返回合成字符分解的多个简单字符。
NFKC,表示“兼容等价合成”(Normalization Form Compatibility Composition),返回合成字符。所谓“兼容等价”指的是语义上存在等价,但视觉上不等价。
NFKD,表示“兼容等价分解”(Normalization Form Compatibility Decomposition),即在兼容等价的前提下,返回合成字符分解的多个简单字符。

5.为String内置对象增加新方法:
虽然String内置对象包含了大量内置方法,但有时仍然会感到不够用,使用者可以为其增加一些新的方法,比如去掉前后的空格常用trim(),就可以使用如下方法增加:
String.prototype.Trim = function(){return this.replace(/^\s+|\s+$/g,"");}
String.prototype.Ltrim = function(){return this.replace(/^\s+/g, "");}
String.prototype.Rtrim = function(){return this.replace(/\s+$/g, "");}
或者还可以增加其他方法:
String.prototype.ResetBlank = function() {      // 合并多个空白为一个空白
     var regEx = /\s+/g;
     return this.replace(regEx, ' ');
};
String.prototype.GetNum = function() {      // 保留数字
     var regEx = /[^\d]/g;
     return this.replace(regEx, '');
};
String.prototype.GetCN = function() {      // 保留中文
     var regEx = /[^\u4e00-\u9fa5\uf900-\ufa2d]/g;
     return this.replace(regEx, '');
};
当然,也可以根据其他需要进行扩展。

6.使用正则表达式的String方法:
正则表达式作用是验证文本值是否符合特定模式或者替换与特定模式匹配的部分文本值。可以在String类的match()、repalce()、search()和splice()方法中,用以匹配、替换、搜索或者拼接字符串。
1)match(regexp)方法中使用正则表达式:
如果regexp没有标志g,就只能执行一次匹配,否则将返回一个数组,其中存放了与它找到的匹配文本有关的信息,该数组的第0,返回的数组还含有两个对象属性,index属性声明的是匹配文本的起始字符在原字符串中的位置,input属性声明的是对原字符串的引用。
如果regexp具有标志g,将执行全局检索,找到所有匹配子字符串。如果找到了一个或多个匹配子串,则返回一个数组,但数组元素中存放的是所有的匹配子串,而没有index或input属性。
示例:
var str="1 plus 2 equal 3"
console.log(str.match(str.match(/\d+/g)));      //['1','2','3']

2)repalce(regexp,replacement)方法中使用正则表达式:
如果regexp具有全局标志g,将替换所有匹配的子串,否则只替换第一个匹配子串。replacement 可以是字符串,也可以是函数,其中的$字符具有特定的含义:$1、$2、...、$99表示与regexp中的第1到第99个子表达式相匹配的文本;$&表示与regexp相匹配的子串;$`表示位于匹配子串左侧的文本;$'表示位于匹配子串右侧的文本;$$为直接量符号。
示例1:
var name = '"a", "b"'
console.log(name.replace(/"([^"]*)"/g, "'$1'"));      //所有的花引号替换为直引号
示例2:
var text = "javascript Tutorial";
console.log(text.replace(/javascript/i, "JavaScript"));      //保证大小写正确
示例3:
var name = "Doe, John";
console.log(name.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1"));      //颠倒词序
示例4:
var name = 'aaa bbb ccc';
console.log(name.replace(/\b\w+\b/g, function(word){      //使用函数参数
    return word.substring(0,1).toUpperCase()+word.substring(1);}      //字符串中所有单词的首字母都转换为大写
));

3)search(regexp)方法中使用正则表达式:
此方法忽略标志g而不执行全局匹配,同时忽略regexp的lastIndex属性,即总是从字符串的开始进行检索。 示例:
var str="Visit W3School!"
console.log(str.search(/w3school/i));      //执行忽略大小写的检索要追加标志i

4)splice(regexp,howmany)方法中使用正则表达式:
示例:
var words = sentence.split(/\s+/)      //英文句子分割为单词

7.正则表达式规则简述:
一个正则表达式是由普通字符以及特殊字符(称为元字符)组成的文字模式。正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配。
正则表达式是普遍使用的一种模板,不仅JavaScript中使用,其他编程语言(如Python等)等也支持,只是使用的方法略有差别而已,表达式规则基本是一致的。
相关内容参见网页
Copyright@dwenzhao.cn All Rights Reserved   备案号:粤ICP备15026949号
联系邮箱:dwenzhao@163.com  QQ:1608288659