首页 web前端 js教程 深入探讨JavaScript String对象_基础知识

深入探讨JavaScript String对象_基础知识

May 16, 2016 pm 04:10 PM
javascript

String 字符串对象

1. 介绍

  String 对象,对字符串进行操作,如:截取一段子串、查找字符串/字符、转换大小写等等。

2. 定义方式

2.1 new String(Value) 构造函数:返回一个内容为Value的String对象
参数:

①value {String} :字符串

返回值:

{String对象} 返回一个内容为Value的String对象

示例:

复制代码 代码如下:

var demoStr = new String('abc');
console.log(typeof demoStr); // => object
console.log(demoStr); // => abc

2.2 直接赋值(推荐)
示例:

复制代码 代码如下:

var demoStr = 'abc';
console.log(typeof demoStr); // string
console.log(demoStr); // => abc

3. 实例属性

3.1 length :返回字符串中的字符数

复制代码 代码如下:

var s = 'abc';
console.log(s.length); // => 3
console.log('新年快乐'.length); // => 4 :一个中文字符也计算为1个数量
console.log(''.length); // => 0 :空字符串返回0

4. 实例方法

注意:字符串的实例方法不会改变字符串的本身,只返回操作后的结果。

4.1 charAt(index) :返回一个字符串中指定位置的字符,编号从0开始,若传入个不存在的数值,就返回空字符串
参数:

①index {int} :位置索引,从0开始计算

返回值:

{string} 返回一个字符串中指定位置的字符;若传入个不存在的位置数值,返回一个空字符串

示例:

复制代码 代码如下:

var s = 'abc';
console.log(s.charAt(1)); // => b :返回位置为1的字符
console.log(s); // => 不影响原来的数组
console.log(s.charAt(5)); // => '' :获取一个不存在位置的字符,返回一个长度为0的空字符串

4.2 charCodeAt(index) :返回一个字符串中指定位置字符的Unicode编码
参数:

①index {int} :位置索引,从0开始计算

返回值:

{number}  返回一个字符串中指定位置字符的Unicode编码;若传入个不存在的位置数值,返回NaN

示例:

复制代码 代码如下:

var s = 'abc';
console.log(s.charCodeAt(0)); // => 98 :字符b的Unicode编码
console.log(s.charCodeAt(5)); // => NaN :获取一个不存在位置的字符,返回NaN

4.3 concat(value1,value2 ... valueN) :连接一个或多个字符串,并返回连接后的字符串
参数:

①value1,value2 ... valueN {string} :一个或多个字符串

返回值:

{string}  返回连接后的字符串

示例:

复制代码 代码如下:

var s = 'abc';
console.log(s.concat('d')); // => abcd
console.log(s); // => abc :不影响原先的字符串
console.log(s.concat('d', 'e')); // => abcde

4.4 indexOf(value , |startPosition ) :在实例中从前往后查找一个字符串或字符,并返回找到的位置(从0开始计数)。若未找到,返回-1
参数:

①value  {string} :查找的字符串

②startPosition {int} 可选 :开始查找的起始位置,默认从位置0开始查找

返回值:

{int}  返回找到的位置(从0开始计数)。若未找到,返回-1

示例:

复制代码 代码如下:

var s = 'abc';
console.log(s.indexOf('b')); // => 1
console.log(s.indexOf('d')); // => -1 :未找到
console.log(s.indexOf('b', 2)); // => -1 :从位置2(第3个字符处)开始查找

4.5 lastIndexOf(value , |startPosition ) :在实例中从后往前开始查找一个字符串或字符,并返回找到的位置(从0开始计数)。若未找到,返回-1
参数:

①value  {string} :查找的字符串

②startPosition {int} 可选 :开始查找的起始位置,默认从最后开始查找

返回值:

{int}  返回找到的位置(从0开始计数)。若未找到,返回-1

示例:

复制代码 代码如下:

var s = 'abcabc';
console.log(s.lastIndexOf('a')); // => 3 :从后往前查找
console.log(s.lastIndexOf('d')); // => -1 :未找到返回-1
console.log(s.lastIndexOf('a', 2)); // => 0 :从位置2(第3个字符处)开始往前查找

4.6 localeCompare(value) :实例与参数进行比较,返回比较结果
参数:

①value  {string} :需比较的字符串

返回值:

  0 :实例比参数大

  1 :实例与参数相等

  -1 :实例比参数小

示例:

复制代码 代码如下:

var s='abc';
console.log(s.localeCompare('ab')); // => 1 :实例比参数大
console.log(s.localeCompare('abc')); // => 0 :实例与参数相等
console.log(s.localeCompare('abd')); // => -1 :实例比参数小
 

4.7 match(regexp) :使用正则表达式进行匹配查找
参数:

①regexp {regexp} :正则表达式,eg:/\d+/

返回值:

根据正则表达式是否带属性'g',返回不同的结果;若没匹配,就返回 {null}:

①正则表达式不带属性'g',执行一次匹配,返回{单个匹配}结果对象,对象包含以下属性:

  数组序号:表示匹配结果,0为匹配文本,1为从做到右第1个圆括号匹配结果,2为第二个圆括号,依此类推

  index属性:表示匹配文本在匹配源的开始位置

  input属性:表示匹配源

②正则表达式带属性'g',执行全局匹配,找到字符串所有匹配对象,返回一个{字符串数组}:数组元素包含string中的每一个匹配对象,不包含正则表达式括号内的字串,也不提供index和input属性。

示例:

复制代码 代码如下:

// 1.单个匹配
var s = 'a1b2c3d4';
var mc = s.match(/\d+/); // => 获取第一个正则匹配的结果
if (mc != null) {
    console.log(mc.index); // => 1 :匹配结果在匹配源的起始位置
    console.log(mc.input) // => a1b2c3d4 :匹配源
    console.log(mc[0]); // => 1 :获取匹配到的结果
}
// 2.全局匹配
var mcArray = s.match(/\d+/g); // => 获取全部正则匹配的数字
if (mcArray != null) {
    for (var i = 0,len=mcArray.length; i         var mc=mcArray[i];
        console.log(mc); // => 1,2,3,4 :获取匹配到的结果
    }
}
// 3.带括号的匹配
s = 'a1b2c3d4';
mc = s.match(/[a-z]([1-9])/); // => 获取第一个正则匹配的结果
if (mc != null) {
    console.log(mc.index); // => 0 :匹配结果在匹配源的起始位置
    console.log(mc.input) // => a1b2c3d4 :匹配源
    console.log(mc[0]); // => a1 :序号0表示匹配到的结果
    console.log(mc[1]); // => 1 :序号1表示第一个括号内的子匹配结果
}

4.8  replace(regexp, replaceStr) :替换正则表达式匹配的子串,并返回替换后的字符串
参数:

①regexp {regexp} :正则表达式。eg:/\d+/

②replaceStr {string | function} :

1)若是字符串,表示替换的字符串,匹配到字串都替换成此字符串;

字符串中的$字符有特殊的含义:

$1,$2 ... $99 :表示①参从左到右圆括号的匹配子项

$& :表示整个①参匹配的子项

$$ :美元符号

2)若是函数,表示每个匹配结果都调用此函数,函数的唯一参数为匹配结果,并返回一个替换结果。

返回值:

{string} 返回一个替换后的字符串

示例:

复制代码 代码如下:

var oldStr = 'a1b2c3d4';
// 1.正则匹配到【所有】数字,替换成:','逗号
var newStr = oldStr.replace(/\d+/g, ',');
console.log(newStr); // => a,b,c,d,
// 2.正则匹配到【所有】数字,替换成:匹配结果 + ','逗号
newStr = oldStr.replace(/\d+/g, '$&,');
console.log(newStr); // => a1,b2,c3,d4,
// 3.正则匹配到【所有】数字,每个匹配结果都调用函数,并返回替换后的结果
newStr = oldStr.replace(/\d+/g, function (word) {
    if (word % 2 == 0) {
        return '偶';
    }
    return '奇';
});
console.log(newStr); // => a奇b偶c奇d偶

4.9 search(regexp) :返回查找正则表达式第一个匹配的位置
参数:

①regexp {regexp} :正则表达式。eg:/\d+/

返回值:

{int} 返回第一个匹配的结果的位置;若没找到匹配结果返回-1

示例:

复制代码 代码如下:

console.log( 'abcd'.search(/\d+/) ); // => -1 :没有找到数字
console.log( 'abcd1234'.search(/\d+/) ); // => 4 :位置序号为4,返回第一个数字的位置

4.10  slice(start, |end):返回从字符串start位置到end前一个位置的子串
参数:

①start {int} :子串提取的开始位置索引(包括此位置的字符)。

      若数字为负,表示从字符串尾部开始计算。如:-1表示倒数一个字符串,-2表示倒数第二个字符。

②end {int} 可选:子串提取的结束位置索引(不包括此位置的字符)。

      若数字为负,表示从字符串尾部开始计算。如:-1表示倒数一个字符串,-2表示倒数第二个字符。

      若省略此参数,返回从start位置到结束的所有字符。

注意:

子串的提取顺序是从左到有,若start索引位置大于end索引位置,将返回一个空字符串。

返回值:

{string} 返回从字符串start位置到end前一个位置的子串。

示例:

复制代码 代码如下:

var s = 'abcdefg';
console.log( s.slice(1) ); // bcdefg :省略end参数,结束位置为末尾
console.log( s.slice(1, 3) ); // bc :返回从位置序号1到位置序号2(end前一个位置)的子串
console.log( s.slice(-3) ); // efg :返回从倒数第三个开始到末尾的所有字符
console.log( s.slice(-3, -1) ); // ef :返回从倒数第三个开始到第二个(end前一个位置)的所有字符

4.11 split(delimiter, |arrayLength) :将字符串按照某种分隔符切分成一个由字符串组成的数组并返回
参数:

①delimiter {regexp | string} :指定的分隔符,可以为正则表达式或字符串。

②arrayLength {int} 可选 :分割数组的长度。若省略,返回所有分割的子串。

注意:

若分隔符在字符串的第一个或最后一个,将添加一个空字符串到返回的数组。

返回值:

{ string[] } 返回一个由字符串组成的数组。

示例:

复制代码 代码如下:

console.log( 'a,b,c,d,e'.split(',') ); // => ["a", "b", "c", "d", "e"]
console.log( ',a,b,c,d,e,'.split(',') ); // => ["", "a", "b", "c", "d", "e", ""] :分隔符在最前或最后面,会添加一个空字符串
console.log( 'a,b,c,d,e'.split(',',3) ); // => ["a", "b", "c"] :返回前3个分割的子串
console.log( 'a1b2c3d4e'.split(/\d/) ); // => ["a", "b", "c", "d", "e"] :将数字来做为分隔符

4.12 substr(start, |wordLength):返回从字符串start位置开始计算到wordLength个长度的子串
参数:

①start {int} :子串提取的开始位置索引(包括此位置的字符)。

      若数字为负,表示从字符串尾部开始计算。如:-1表示倒数一个字符串,-2表示倒数第二个字符。

②wordLength {int} 可选 :提取字符的长度。若省略此参数,返回从start位置到结束的所有字符。

返回值:

{string} 返回提取的字符串

示例:

复制代码 代码如下:

ar s = 'abcdefg';
onsole.log( s.substr(0) ); // =>  abcdefg :省略第二个参数,返回从位置序号0开始,一直到最后的字符
onsole.log( s.substr(0, 3) ); // => abc :返回从位置序号0开始,计数3个字符
onsole.log( s.substr(2, 4) ); // => cdef :返回从位置序号2开始,计数4个字符
onsole.log( s.substr(-2, 3) ); // fg :返回从倒数第二个字符串开始,计数3个(超过字符长度,就只返回可统计的字符)

4.13 substring(start, |end) :返回从字符串start位置到end前一个位置的子串
参数:

①start {int} :子串提取的开始位置索引(包括此位置的字符)。数字不能为负数,若为负数按0来处理

②end {int} 可选:子串提取的结束位置索引(不包括此位置的字符)。数字不能为负数,若为负数按0来处理

返回值:

{string} 返回从字符串start位置到end前一个位置的子串。

示例:

复制代码 代码如下:

var s = 'abcdefg';
console.log( s.substring(0) ); // =>  abcdefg :省略end参数,返回从位置序号0开始,一直到最后的字符
console.log( s.substring(0, 3) ); // => abc :返回从位置序号0开始到位置序号2(②参的前一个)的字符
console.log( s.substring(2, 4) ); // => cd :返回从位置序号2开始到位置序号3(②参的前一个)的字符
console.log( s.substring(-3, 3) ); // abc :参数若为负,就按数字0来处理,所以此参数实际返回位置序号0到位置序号3的字符

4.14 toUpperCase() :将字符串转换为大写并返回
4.15 toUpperCase() :将字符串转换为小写并返回
4.16 trim() :移除字符串开头和结尾处的空白字符并返回

以上就是本文的全部内容了,希望通过本文,大家对javascript中的String对象能有新的认识。

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何使用WebSocket和JavaScript实现在线语音识别系统 如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript实现在线语音识别系统引言:随着科技的不断发展,语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统,具备了低延迟、实时性和跨平台的特点,成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

WebSocket与JavaScript:实现实时监控系统的关键技术 WebSocket与JavaScript:实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript:实现实时监控系统的关键技术引言:随着互联网技术的快速发展,实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用,并给出代码示例,详细解释其实现原理。一、WebSocket技

如何使用WebSocket和JavaScript实现在线预约系统 如何使用WebSocket和JavaScript实现在线预约系统 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代,越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统,并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

如何利用JavaScript和WebSocket实现实时在线点餐系统 如何利用JavaScript和WebSocket实现实时在线点餐系统 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍:随着互联网的普及和技术的进步,越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统,我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议,可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中,当用户选择菜品并下单

JavaScript和WebSocket:打造高效的实时天气预报系统 JavaScript和WebSocket:打造高效的实时天气预报系统 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的实时天气预报系统引言:如今,天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展,我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中,我们将学习如何使用JavaScript和WebSocket技术,来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

简易JavaScript教程:获取HTTP状态码的方法 简易JavaScript教程:获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

javascript中如何使用insertBefore javascript中如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法:在JavaScript中,insertBefore()方法用于在DOM树中插入一个新的节点。这个方法需要两个参数:要插入的新节点和参考节点(即新节点将要被插入的位置的节点)。

如何在JavaScript中获取HTTP状态码的简单方法 如何在JavaScript中获取HTTP状态码的简单方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP状态码获取方法简介:在进行前端开发中,我们常常需要处理与后端接口的交互,而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法,并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时,服务

See all articles