字符串

本章是字符串类型的进阶讲解,有关数字类型的初步介绍请看 String 类型章节。

赋值时换行

当我们有以下一串冗长的字符串(常见于密钥)时,希望能将其换行输入并达到同样的效果。

let str = "123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789"
console.log(str)

我们有以下两个办法:

使用加法运算符拼接:

$$jsdemo$$
$$edit$$
let str = "123abc"
let str2 = "123" +
            "abc"

alert(str) // 123abc
alert(str2) // 123abc

alert(str == str2) // true

换行处使用反斜杠:

$$jsdemo$$
$$edit$$
let str = "123abc"
let str2 = "123\
abc"

alert(str) // 123abc
alert(str2) // 123abc

alert(str == str2) // true

字符串中的换行

很多时候我们的字符串中会包含换行,当输入换行时我们有两种办法。

使用 \n 转义字符(推荐):

$$edit$$
$$jsdemo$$
let str = "同学名单:\n小明\n鸣人\n路飞"
alert(str)

使用反引号:

$$jsdemo$$
$$edit$$
let str = `同学名单:
小明
鸣人
路飞`
alert(str)

转义字符

\n 属于一个转义字符,转义字符可以让我们在字符串中表示一些特殊字符,常用转义字符有以下:

代码 描述
\' 单引号
\" 双引号
\\ 反斜杠
\n 换行
\r 回车(以前需要在 windows 中与 \n 搭配使用,现已不常用。)
\t tab(制表符)
\b 退格符
\f 换页符

字符串类型常用属性与方法

$$tip

字符串全面的属性与方法请参考 String - MDN

$$

字符串长度

length 属性表示了一个字符串的长度。

$$tip

换行 \n 虽然看着有两个字符,但其只算一个字符。

$$

let str = "路飞\n鸣人"
alert(str.length) // 5,换行属于一个字符

拼接字符串

拼接字符串时有两种方式, + 运算符或 concat 方法。

concat 会拼接并返回一个新字符串。

<body>
    <input id="email" type="text" placeholder="邮箱" />
    <span>@3yya.com</span>
    <button onclick="signup()">注册</button>
</body>
<script>
    function signup() {
        let email = document.getElementById("email").value
        email = email.concat("@3yya.com")
        alert(`您注册的邮箱是:${email}`)
    }
</script>

$$demo

<body>

<input id="email" type="text" placeholder="邮箱" />

<span>@3yya.com</span>

<button onclick="signup()">注册</button>

</body>

<script>

function signup() {

let email = document.getElementById("email").value

email = email.concat("@3yya.com")

alert(您注册的邮箱是:${email})

}

</script>

$$

访问字符

当我们想访问字符串中特定位置的字符时有两个办法,方括号运算符或 charAt(pos) 方法。

方括号运算符

方括号运算符与数组的使用类似,下标从 0 开始,访问下标不存在时返回 undefined

$$jsdemo$$
$$edit$$
let str = "三眼鸭的编程教室"
alert(str[2]) // 鸭
alert(str[10]) // undefined

字符串不可改变,如果尝试对某个下标赋值会不起作用。

$$jsdemo$$
$$edit$$
let str = "三眼鸭的编程教室"
str[2] = "鸡"
alert(str) // 三眼鸭的编程教室

charAt(pos) 方法

charAt 唯一的不同在于,试图访问一个不存在的下标时返回的是空字符串。

$$jsdemo$$
$$edit$$
let str = "三眼鸭的编程教室"
alert(str.charAt(2)) // 鸭
alert(str.charAt(10)) // 空字符串

重复字符串

repeat(count) 可以将一个字符串重复指定的次数。

$$jsdemo$$
$$edit$$
let str = "重要的事说三遍!!!"
alert(str.repeat(3)) // 重要的事说三遍!!!重要的事说三遍!!!重要的事说三遍!!!

大小写转换

toLowerCase() 方法

toLowerCase() 方法会将返回转成小写的新字符串,原有字符串不受影响。

$$jsdemo$$
$$edit$$
let str = "ABCdef"
let result = str.toLowerCase()
alert(result) // abcdef,转成小写
alert(str) // ABCdef,原有字符串不受影响

toUpperCase() 方法

toUpperCase() 则是将返回转成大写的新字符串,同样原有字符串不受影响。

$$jsdemo$$
$$edit$$
let str = "ABCdef"
let result = str.toUpperCase()
alert(result) // ABCDEF,转成大写
alert(str) // ABCdef,原有字符串不受影响

分割字符串

split(sep) 方法允许你以一个分割符 sep 来分割字符串,分割后的结果为一个数组。

$$jsdemo$$
$$edit$$
let str = "0771-442-65536"

let arr = str.split("-")
console.log(arr) // ['0771', '442', '65536']

去除前后空白符

trim() 常用来删除输入的前后空白符(空格、制表符、换行)并返回新的字符串,比如像用户输入用户名或邮箱的时候。

$$jsdemo$$
$$edit$$
let email = " 123@qq.com 456@qq.com "
alert(email.trim()) // 123@qq.com 456@qq.com,中间的空格不会被删除
alert(email) // 原字符不受影响

$$tip

trimStart() 是仅删除开头空白符, trimEnd() 是仅删除结尾空白符。

$$

包含字符串

includes(str) 方法能判断是否包含指定字符串。

$$jsdemo$$
$$edit$$
let email = prompt("输入你的邮箱。")
if (email.includes("@")) {
    alert("注册成功。")
} else {
    alert("邮箱格式错误。")
}

是否以特定字符串开头或结尾

startsWith(str) 判断是否以特定字符串开头, endsWith(str) 判断是否以特定的字符串结尾。

$$jsdemo$$
$$edit$$
let email = prompt("输入你的邮箱。")
if (email.endsWith("@qq.com")) {
    alert("你输入的是 qq 邮箱。")
} else if (email.endsWith("@gmail.com")) {
    alert("你输入的是 gmail 邮箱。")
} else {
    alert("未能正确识别你的邮箱。")
}

查找字符串

indexOf(str[, fromIndex]) 返回第一次匹配到的字符串位置,如果未匹配到则返回 -1fromIndex 是一个可选参数,表示查找的起始位置,默认值为 0

$$jsdemo$$
$$edit$$
let str = "我是中国人,我爱中国。"
alert(str.indexOf("中国")) // 2
alert(str.indexOf("中国", 5)) // 8,从第五个字符开始找起
alert(str.indexOf("美国")) // -1,未匹配到

截取字符串

substring(indexStart[, indexEnd]) 返回从指定下标 indexStart 开始到指定下标 indexEnd (不包含)之间的字符串。 indexEnd 可省略,表示截取到字符串末尾。

$$jsdemo$$
$$edit$$
let email = prompt("请输入你的邮箱")
let index = email.indexOf("@")
alert("你的邮箱服务商是:" + email.substring(index))

$$tip

类似的还有 slice(beginIndex[, endIndex]) ,不同点在于 slice 允许负数下标,详情看 slice - MDN

$$

替换字符串

replace(str, newStr) 可以替换第一个匹配到的字符串。

$$jsdemo$$
$$edit$$
let str = "我是地球人,我爱地球。"
alert(str.replace("地球", "中国")) // 我是中国人,我爱地球。

replaceAll(str, newStr) 则可以替换所有匹配的字符串。

$$jsdemo$$
$$edit$$
let str = "我是地球人,我爱地球。"
alert(str.replaceAll("地球", "中国")) // 我是中国人,我爱中国。

练习

  1. 写一个函数,接收一个英文句子将其首字母大写并返回。
function upperFirst(str) {
    // 补充这里
}

let str = "hello china, I love you very much."
alert(upperFirst(str)) // Hello china, I love you very much.

$$answer

$$jsdemo$$
$$edit$$
function upperFirst(str) {
    return str[0].toUpperCase() + str.substring(1)
}

let str = "hello china, I love you very much."
alert(upperFirst(str)) // Hello china, I love you very much.

$$

  1. 写一个函数,接收一个英文句子将其所有单词的首字母大写并返回。
function upperWord(str) {
    // 补充这里
}

let str = "hello china, I love you very much."
alert(upperWord(str)) // Hello China, I Love You Very Much.

$$answer

$$jsdemo$$
$$edit$$
function upperFirst(str) {
    return str[0].toUpperCase() + str.substring(1)
}

function upperWord(str) {
    let arr = str.split(" ")

    let result = ""
    for (let i in arr) {
        result += upperFirst(arr[i])

        if (i != arr.length - 1) {
            // 如果不是最后一个单词
            // 加上一个间隔用的空格
            result += " "
        }
    }
    return result
}

let str = "hello china, I love you very much."
alert(upperWord(str)) // Hello China, I Love You Very Much. 

$$

  1. 写一个函数,查找对应字符串出现的次数。
function counter(str, word) {
    // 补充完成
}

let str = "我是中国人,我生在中国,长在中国,爱我中国。"

alert(`中国出现了 ${counter(str, "中国")} 次`) // 中国出现了 4 次

$$answer 答案一:

$$jsdemo$$
$$edit$$
function counter(str, word) {
    let count = 0
    let pos = 0

    while (true) {
        pos = str.indexOf(word, pos)

        if (pos === -1) {
            // 未找到
            return count
        } else {
            // 计数加 1
            count++
            // 从下一个字符开始查找
            pos++
        }
    }
}

let str = "我是中国人,我生在中国,长在中国,爱我中国。"

alert(`中国出现了 ${counter(str, "中国")} 次`) // 中国出现了 4 次

答案二:

$$jsdemo$$
$$edit$$
function counter(str, word) {
    return str.split(word).length - 1
}

let str = "我是中国人,我生在中国,长在中国,爱我中国。"

alert(`中国出现了 ${counter(str, "中国")} 次`) // 中国出现了 4 次

$$

  1. 和谐社会下为了净化网络环境,需要过滤一些敏感词,提供了一个敏感词数组,请净化用户输入的评论。
function cleanUp(str) {
    // 补充完成
}

// 用户评论
let comment =
    "杀死比尔是一部好电影,除此我还喜欢昆汀的低俗小说和落水狗,里面的血腥场景很值得回味。"
// 敏感词列表
let sensitiveWords = ["杀", "血", "低俗", "狗"]

alert(cleanUp(comment)) // *死比尔是一部好电影,除此我还喜欢昆汀的**小说和落水*,里面的*腥场景很值得回味。

$$answer

$$jsdemo$$
$$edit$$
function cleanUp(str) {
    // 和谐关键词
    for (let word of sensitiveWords) {
        str = str.replaceAll(word, "*".repeat(word.length))
    }

    return str
}

// 用户评论
let comment =
    "杀死比尔是一部好电影,除此我还喜欢昆汀的低俗小说和落水狗,里面的血腥场景很值得回味。"

// 敏感词列表
let sensitiveWords = ["杀", "血", "低俗", "狗"]

alert(cleanUp(comment)) // *死比尔是一部好电影,除此我还喜欢昆汀的**小说和落水*,里面的*腥场景很值得回味。

$$