1. JavaScript 基础

  2. 深入数据和类型

  3. 函数进阶

  4. 运算符

  5. 浏览器存储

  6. Document

  7. Web API

  8. 事件

  9. 工具与规范

  10. 实例

  11. 练习

字符串

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

赋值时换行

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

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

我们有以下两个办法:

使用加法运算符拼接:

$$jsdemo$$
$$edit$$
let str = "123abc"
let str2 = "123" +
            "abc"
alert(str == str2) // true

换行处使用反斜杠:

$$jsdemo$$
$$edit$$
let str = "123abc"
let str2 = "123\
abc"
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,换行属于一个字符

拼接字符串

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

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

<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 开始,访问下标不存在时返回 undefine

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

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

$$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 = "ABCefg"
let result = str.toLowerCase()
alert(result) // abcefg,转成小写
alert(str) // ABCefg,原有字符串不受影响

toUpperCase() 方法

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

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

去除前后空白符

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

$$jsdemo$$
$$edit$$
let email = " 123@q.com   "
alert(email.trim()) // 删除前后空白符
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("美国")) // -1,未匹配到

实例:统计字符串出现次数

$$jsdemo$$
$$edit$$
let str = "我是中国人,我生在中国,长在中国,爱我中国。"
function counter(str, word) {
    let amount = -1
    let pos = -1

    do {
        pos = str.indexOf(word, pos + 1)
        amount++
    } while (pos != -1)
    return amount
}

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

截取字符串

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 cleanUp(str) {
    // 补充完成
}

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

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

2.写一个函数,接收一个字符串将其首字母大写并返回。