CodeGym /Java 课程 /Frontend SELF ZH /字符串及其操作方法

字符串及其操作方法

Frontend SELF ZH
第 33 级 , 课程 3
可用

4.1 字符串简介

JavaScript中的字符串是字符序列,是一种基本数据类型。 字符串可以用单引号('文本'),双引号("文本"), 或反引号(`文本`)来创建。

字符串示例:

JavaScript
    
      let singleQuote = 'Hello, World!';
      let doubleQuote = "Hello, World!";
      let backticks = `Hello, World!`;
    
  

字符串对象上可以调用这些方法:

方法 描述
length 返回字符串的长度
charAt(index) 返回指定位置的字符
toUpperCase() 将字符串转换为大写
toLowerCase() 将字符串转换为小写
indexOf(substring) 返回子串的第一次出现的索引,如果未找到则返回-1
includes(substring) 检查字符串是否包含指定的子串,返回true或false
slice(start, end) 提取字符串的一部分并返回一个新字符串
replace(searchValue, newValue) 将指定子串替换为新子串
split(separator) 使用指定分隔符将字符串拆分为子串数组
trim() 删除字符串开头和结尾的空格

4.2 字符串的基本操作方法

方法使用示例

1. length属性

返回字符串的长度:

JavaScript
    
      let str = 'Hello';
      console.log(str.length); // 5
    
  

2. 方法 charAt(index)

返回指定位置的字符:

JavaScript
    
      let str = 'Hello';
      let result = str.charAt(1);
      console.log(result); // 'e'
    
  

3. 方法 toUpperCase() 和 toLowerCase():

将字符串转换为大写或小写:

JavaScript
    
      let str = 'Hello';
      console.log(str.toUpperCase()); // 'HELLO'
      console.log(str.toLowerCase()); // 'hello'
    
  

4. 方法 indexOf(substring)

返回子串的第一次出现的索引,或-1如果未找到:

JavaScript
    
      let str = 'Hello, world!';
      let result = str.indexOf('world');
      console.log(result); // 7
    
  

5. 方法 includes(substring)

检查字符串是否包含指定的子串,返回true或false:

JavaScript
    
      let str = 'Hello, world!';
      let result = str.includes('world');
      console.log(result); // true
    
  

6. 方法 trim()

删除字符串开头和结尾的空格:

JavaScript
    
      let str = '   Hello, world!   ';
      console.log(str.trim()); // 'Hello, world!'
    
  

7. 方法 replace(searchValue, newValue)

将指定子串替换为新子串:

JavaScript
    
      let str = 'Hello, world!';
      console.log(str.replace('world', 'JavaScript')); // 'Hello, JavaScript!'
    
  

8. 方法 split(separator)

使用指定分隔符将字符串拆分为子串数组:

JavaScript
    
      let str = 'Hello, world!';
      let words = str.split(' ');
      console.log(words); // ['Hello,', 'world!']
    
  

9. 方法 substring(start, end)

返回两个索引之间的子串:

JavaScript
    
      let str = 'Hello, world!';
      console.log(str.substring(0, 5)); // 'Hello'
    
  

10. 方法 substr(start, length)

返回从指定索引开始的子串,并指定长度:

JavaScript
    
      let str = 'Hello, world!';
      console.log(str.substr(0, 5)); // 'Hello'
    
  

11. 方法 slice(start, end)

提取字符串的一部分并返回一个新字符串:

JavaScript
    
      let str = 'Hello, world!';
      console.log(str.slice(0, 5)); // 'Hello'
    
  

12. 方法 startsWith(substring)

检查字符串是否以指定子串开头,返回truefalse

JavaScript
    
      let str = 'Hello, world!';
      console.log(str.startsWith('Hello')); // true
    
  

13. 方法 endsWith(substring)

检查字符串是否以指定子串结尾,返回truefalse

JavaScript
    
      let str = 'Hello, world!';
      console.log(str.endsWith('world!')); // true
    
  

14. 方法 repeat(count)

返回包含指定数量的原字符串的新字符串:

JavaScript
    
      let str = 'Hello';
      console.log(str.repeat(3)); // 'HelloHelloHello'

      let str2 = '-';
      console.log(str2.repeat(30)); // '---------------------------------------------------------------'
    
  

4.3 新一代字符串

模板字符串最近在JavaScript中被添加进来,它们提供了一种比常规字符串更方便和可读的文本处理方式。用反引号(`)括起,支持表达式插值和多行文本。

语法:

    
      `新一代字符串`
    
  

示例:

模板字面量greeting是用反引号创建的。

JavaScript
    
      const greeting = `Hello, World!`;
      console.log(greeting); // "Hello, World!"
    
  

模板字符串的主要特点:

  • 表达式插值: 模板字符串允许通过${}插入表达式和变量到字符串中
  • 多行文本: 模板字符串支持多行文本而无需使用特殊字符来换行
  • 内嵌表达式: 模板字符串中可以使用任何JavaScript表达式,包括函数

来看几个模板字符串的使用例子。

表达式插值

模板字符串使将变量值和表达式结果插入到字符串中变得非常简单:

JavaScript
    
      let name = "Alice";
      let age = 30;
      let greeting = `Hello, ${name}! You are ${age} years old.`;
      console.log(greeting); // "Hello, Alice! You are 30 years old."
    
  

在这个例子中,nameage变量被插入到字符串中,通过使用${}

多行文本

模板字符串简化了多行字符串的创建,无需使用换行符号(\n):

JavaScript
    
      let multiLine = `Lorem ipsum odor, consectetuer adipiscing elit.
      Sit lorem mattis eget maximus.`;

      console.log(multiLine);
    
  

内嵌表达式

在模板字符串中可以使用任何JavaScript表达式,包括函数调用:

JavaScript
    
      let a = 5;
      let b = 10;
      let result = `The sum of ${a} and ${b} is ${a + b}.`;
      console.log(result); // "The sum of 5 and 10 is 15."

      function getGreeting(name) {
        return `Hello, ${name}!`;
      }

      let greeting = `${getGreeting("Bob")}`;
      console.log(greeting); // "Hello, Bob!"
    
  

当然,最好不要在字符串中调用函数,但如果非常想,就可以这样做。

评论
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION