深入探究 JavaScript 中的 String:常用方法和属性全解析(中)

简介: 深入探究 JavaScript 中的 String:常用方法和属性全解析(中)

三、String的常用方法

length属性:获取字符串的长度

length 属性是 String 对象的一个属性,用于获取字符串的长度。它是通过在字符串前加上方括号 [] 来访问的,例如:

let str = "Hello, world!";
console.log(str.length); // 输出 13

在这个例子中,我们使用 length 属性获取了字符串 str 的长度,并将其输出到控制台。

length 属性返回的字符串长度不包括空格和换行符,只包括字符。例如:

let str = "Hello, world!";
console.log(str.length); // 输出 13

在这个例子中,字符串 str 的长度是 13,因为它包含了 12 个字符和 1 个空格。

需要注意的是,length 属性返回的字符串长度是整数,即它总是返回一个整数,即使字符串中包含小数。

charAt()方法:获取字符串中指定位置的字符

charAt() 方法是 String 对象的一个方法,用于获取字符串中指定位置的字符。它是通过在字符串前加上方括号 [] 和一个数字来访问的,例如:

let str = "Hello, world!";
console.log(str.charAt(0)); // 输出 'H'
console.log(str.charAt(7)); // 输出 'w'
console.log(str.charAt(12)); // 输出 '!'

在这个例子中,我们使用 charAt() 方法获取了字符串 str 中指定位置的字符,并将其输出到控制台。

charAt() 方法的参数是一个数字,表示字符串中字符的位置。这个数字从 0 开始,表示第一个字符的位置。例如,charAt(0) 返回字符串中的第一个字符,charAt(1) 返回字符串中的第二个字符,以此类推。

需要注意的是,如果 charAt() 方法的参数超出了字符串的长度,那么它会返回 undefined。例如:

let str = "Hello, world!";
console.log(str.charAt(13)); // 输出 undefined

在这个例子中,我们尝试使用 charAt() 方法获取字符串 str 中位置为 13 的字符,但是由于字符串的长度只有 13,所以我们得到了 undefined

concat()方法:连接两个或多个字符串

concat() 方法是 String 对象的一个方法,用于连接两个或多个字符串。它是通过在字符串前加上方括号 [] 和一个或多个字符串来访问的,例如:

let str1 = "Hello";
let str2 = "world!";
let str3 = str1.concat(str2);
console.log(str3); // 输出 "Helloworld!"

在这个例子中,我们使用 concat() 方法将两个字符串 str1str2 连接在一起,并将其输出到控制台。

concat() 方法的参数可以是一个或多个字符串,它将这些字符串连接在一起,形成一个新的字符串。例如:

let str1 = "Hello";
let str2 = "world";
let str3 = str1.concat(" ", str2);
console.log(str3); // 输出 "Hello world"

在这个例子中,我们使用 concat() 方法将两个字符串 str1str2 以及一个空格连接在一起,并将其输出到控制台。

需要注意的是,concat() 方法返回一个新的字符串,而不是在原字符串上进行修改。例如:

let str = "Hello";
let str2 = "world";
str = str.concat(str2);
console.log(str); // 输出 "world"
console.log(str2); // 输出 "world"

在这个例子中,我们使用 concat() 方法将两个字符串 strstr2 连接在一起,并将结果赋给原字符串 str。但是,输出结果是 str2,而不是 str,因为 concat() 方法返回的是一个新的字符串。

indexOf()lastIndexOf()方法:查找字符串中字符或子字符串的位置

indexOf()lastIndexOf() 方法是 String 对象的两个方法,用于查找字符串中指定字符或子字符串的位置。它们在字符串中查找指定的字符或子字符串,并返回该字符或子字符串在字符串中首次出现的位置的索引,或者最后一次出现的位置的索引,取决于调用哪个方法。

以下是这两个方法的语法:

str.indexOf(searchElement[, fromIndex])
str.lastIndexOf(searchElement[, fromIndex])

其中,searchElement 是要查找的字符或子字符串,fromIndex 是可选参数,表示从哪个位置开始查找。

下面是这两个方法的详细说明:

  1. indexOf()方法:
  • indexOf() 方法用于查找字符串中指定字符或子字符串首次出现的位置的索引。
  • 如果未找到该字符或子字符串,则返回 -1。
  • 如果指定 fromIndex 参数,则从该索引开始查找。如果该索引大于或等于字符串的长度,则返回 -1。
  1. lastIndexOf()方法:
  • lastIndexOf() 方法用于查找字符串中指定字符或子字符串最后一次出现的位置的索引。
  • 如果未找到该字符或子字符串,则返回 -1。
  • 如果指定 fromIndex 参数,则从该索引开始查找。如果该索引大于或等于字符串的长度,则返回 -1。

下面是一些示例:

let str = "Hello, world!";
// 查找子字符串 "world"
let index = str.indexOf("world");
console.log(index); // 输出 7
let index2 = str.indexOf("world", 6);
console.log(index2); // 输出 7
let index3 = str.indexOf("world", 8);
console.log(index3); // 输出 -1
// 查找字符 "w"
let index = str.indexOf("w");
console.log(index); // 输出 1
let index2 = str.indexOf("w", 2);
console.log(index2); // 输出 1
let index3 = str.indexOf("w", 3);
console.log(index3); // 输出 -1

在这个例子中,我们使用 indexOf() 方法查找字符串 str 中子字符串 “world” 的首次出现位置,并将其输出到控制台。我们还尝试使用 indexOf() 方法从索引 6 开始查找子字符串 “world”,并将其输出到控制台。我们还尝试使用 indexOf() 方法从索引 8 开始查找子字符串 “world”,但是未找到,所以输出 -1。我们还使用 indexOf() 方法查找字符串 str 中字符 “w” 的首次出现位置,并将其输出到控制台。我们还尝试使用 indexOf() 方法从索引 2 开始查找字符 “w”,并将其输出到控制台。我们还尝试使用 indexOf() 方法从索引 3 开始查找字符 “w”,但是未找到,所以输出 -1。

substring()方法:提取字符串的子字符串

substring() 方法是 String 对象的一个方法,用于提取字符串的子字符串。它是通过在字符串前加上方括号 [] 和两个数字来访问的,例如:

let str = "Hello, world!";
let subStr = str.substring(0, 5);
console.log(subStr); // 输出 "Hello"

在这个例子中,我们使用 substring() 方法从字符串 str 中提取从索引 0 开始到索引 5(不包括索引 5)之间的子字符串,并将其输出到控制台。

substring() 方法的第一个参数是子字符串的起始索引,第二个参数是子字符串的结束索引。这两个索引都是可选的,如果省略,则默认为字符串的起始和结束索引。例如:

let str = "Hello, world!";
// 从索引 0 开始到字符串的结束索引
let subStr1 = str.substring(0);
console.log(subStr1); // 输出 "Hello, world!"
// 从字符串的起始索引到索引 5(不包括索引 5)
let subStr2 = str.substring(7);
console.log(subStr2); // 输出 "world!"

在这个例子中,我们使用 substring() 方法从字符串 str 中提取从索引 0 开始到字符串结束的子字符串,并将其输出到控制台。我们还使用 substring() 方法从索引 7 开始到索引 5(不包括索引 5)之间的子字符串,并将其输出到控制台。

需要注意的是,substring() 方法返回的是一个子字符串的引用,而不是一个新字符串。例如:

let str = "Hello, world!";
let subStr = str.substring(0, 5);
str = str.substring(0, 5);
console.log(str); // 输出 "Hello"
console.log(subStr); // 输出 "Hello"

在这个例子中,我们使用 substring() 方法从字符串 str 中提取从索引 0 开始到索引 5(不包括索引 5)之间的子字符串,并将其赋给变量 subStr。然后,我们将变量 str 的起始索引和结束索引都设置为 0 和 5,这意味着我们实际上是在修改 str 变量本身,而不是创建一个新的子字符串。所以,输出结果是相同的。

toLowerCase()toUpperCase()方法:将字符串转换为小写或大写

toLowerCase()toUpperCase() 方法是 String 对象的两个方法,用于将字符串转换为小写或大写。

以下是这两个方法的语法:

str.toLowerCase()
str.toUpperCase()

其中,str 是需要转换的字符串。

下面是这两个方法的详细说明:

  1. toLowerCase()方法:
  • toLowerCase() 方法将字符串中的所有字符转换为小写形式。
  • 如果字符串已经是最小写形式,则不会进行任何更改。
  1. toUpperCase()方法:
  • toUpperCase() 方法将字符串中的所有字符转换为大写形式。
  • 如果字符串已经是最大写形式,则不会进行任何更改。

下面是一些示例:

let str = "Hello, World!";
let lowerStr = str.toLowerCase();
console.log(lowerStr); // 输出 "hello, world!"
let upperStr = str.toUpperCase();
console.log(upperStr); // 输出 "HELLO, WORLD!"

在这个例子中,我们使用 toLowerCase() 方法将字符串 str 转换为小写形式,并将其输出到控制台。我们还使用 toUpperCase() 方法将字符串 str 转换为大写形式,并将其输出到控制台。

需要注意的是,toLowerCase()toUpperCase() 方法返回的是一个新字符串,而不是在原字符串上进行修改。例如:

let str = "Hello, World!";
let lowerStr = str.toLowerCase();
str = lowerStr;
console.log(str); // 输出 "hello, world!"
console.log(lowerStr); // 输出 "hello, world!"

在这个例子中,我们使用 toLowerCase() 方法将字符串 str 转换为小写形式,并将其赋给变量 lowerStr。然后,我们将变量 str 设置为 lowerStr,这意味着我们实际上是在修改 str 变量本身,而不是创建一个新的字符串。所以,输出结果是相同的。

trim()方法:去除字符串两侧的空格

trim() 方法是 String 对象的一个方法,用于去除字符串两侧的空格。它是通过在字符串前加上方括号 [] 来访问的,例如:

let str = "  Hello, World!  ";
let trimStr = str.trim();
console.log(trimStr); // 输出 "Hello, World!"

在这个例子中,我们使用 trim() 方法去除字符串 str 两侧的空格,并将其输出到控制台。

trim() 方法的语法很简单,只有一个参数,即需要去除空格的字符串。它返回一个新的字符串,其中两侧的空格已被删除。

需要注意的是,trim() 方法不会删除字符串中间的空格,只会删除字符串两侧的空格。例如:

let str = "  Hello, World!  ";
let trimStr = str.trim();
console.log(trimStr); // 输出 "Hello, World!"
console.log(str); // 输出 "  Hello, World!  "

在这个例子中,我们使用 trim() 方法去除字符串 str 两侧的空格,并将其输出到控制台。然后,我们将原始字符串 str 输出到控制台,可以看到它仍然是原样。

replace()方法:替换字符串中的特定子字符串

replace() 方法是 String 对象的一个方法,用于替换字符串中的特定子字符串。它是通过在字符串前加上方括号 [] 和两个参数来访问的,例如:

let str = "Hello, World!";
let newStr = str.replace("World", "Universe");
console.log(newStr); // 输出 "Hello, Universe!"

在这个例子中,我们使用 replace() 方法将字符串 str 中的 “World” 子字符串替换为 “Universe”,并将其输出到控制台。

replace() 方法的第一个参数是要被替换的子字符串,第二个参数是要替换为的新子字符串。这两个参数都是可选的,如果省略,则默认为空字符串。例如:

let str = "Hello, World!";
let newStr = str.replace("World", "Universe");
console.log(newStr); // 输出 "Hello, Universe!"
let newStr2 = str.replace("World", "Universe", 1);
console.log(newStr2); // 输出 "Hello, Universe!"

在这个例子中,我们使用 replace() 方法将字符串 str 中的 “World” 子字符串替换为 “Universe”,并将其输出到控制台。我们还使用 replace() 方法将字符串 str 中的 “World” 子字符串替换为 “Universe”,并限制替换次数为 1,因此只替换了第一次出现的 “World”。

需要注意的是,replace() 方法返回一个新的字符串,而不是在原字符串上进行修改。例如:

let str = "Hello, World!";
let newStr = str.replace("World", "Universe");
str = newStr;
console.log(str); // 输出 "Hello, Universe!"
console.log(newStr); // 输出 "Hello, Universe!"

在这个例子中,我们使用 replace() 方法将字符串 str 中的 “World” 子字符串替换为 “Universe”,并将其赋给变量 newStr。然后,我们将变量 str 设置为 newStr,这意味着我们实际上是在修改 str 变量本身,而不是创建一个新的字符串。所以,输出结果是相同的。

相关文章
|
16天前
|
存储 JavaScript 索引
JS中数组的相关方法介绍
JS中数组的相关方法介绍
|
17天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
18 0
|
19天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
25天前
|
JavaScript 前端开发
JavaScript 中如何检测一个变量是一个 String 类型?
JavaScript 中如何检测一个变量是一个 String 类型?
21 2
|
16天前
|
JavaScript 前端开发 索引
JavaScript中与字符串相关的方法
JavaScript中与字符串相关的方法
|
1天前
|
JavaScript 前端开发
js 操作数组的方法
js 操作数组的方法
12 4
|
5天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
5天前
|
前端开发 JavaScript 编译器
深入解析JavaScript中的异步编程:Promises与async/await的使用与原理
【4月更文挑战第22天】本文深入解析JavaScript异步编程,重点讨论Promises和async/await。Promises用于管理异步操作,有pending、fulfilled和rejected三种状态。通过.then()和.catch()处理结果,但可能导致回调地狱。async/await是ES2017的语法糖,使异步编程更直观,类似同步代码,通过事件循环和微任务队列实现。两者各有优势,适用于不同场景,能有效提升代码可读性和维护性。
|
9天前
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
js 垃圾回收机制的方法
|
9天前
|
JavaScript 前端开发
js数据类型有几类?一共有几种?判断数据类型的方法是什么?
js数据类型有几类?一共有几种?判断数据类型的方法是什么?