字符串

本章是字符串类型的进阶讲解，有关数字类型的初步介绍请看 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>

</body>

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]) 返回第一次匹配到的字符串位置，如果未匹配到则返回 -1 。 fromIndex 是一个可选参数，表示查找的起始位置，默认值为 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("地球", "中国")) // 我是中国人，我爱中国。

练习

写一个函数，接收一个英文句子将其首字母大写并返回。

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.

写一个函数，接收一个英文句子将其所有单词的首字母大写并返回。

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.

写一个函数，查找对应字符串出现的次数。

function counter(str, word) {
    // 补充完成
}

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

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

$$answer

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

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

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

和谐社会下为了净化网络环境，需要过滤一些敏感词，提供了一个敏感词数组，请净化用户输入的评论。

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)) // *死比尔是一部好电影，除此我还喜欢昆汀的**小说和落水*，里面的*腥场景很值得回味。