一、字符串概述

定義：字符串就是用單引號(hào)或者雙引號(hào)包裹起來的，零個(gè)或多個(gè)排列在一起的字符。

例如：’javascript‘, “”, “345” , ’9-11a$‘, “xiao_yuanLian”

嵌套：字符串可以嵌套。

在單引號(hào)包裹的字符串內(nèi)部，應(yīng)該使用雙引號(hào)進(jìn)行嵌套。

在雙引號(hào)包裹的字符串內(nèi)部，應(yīng)該使用單引號(hào)進(jìn)行嵌套。

例如：“I am ‘coolMan’”, ’are u “kidding” me’

二、字符串的使用

2.1 字符串換行

var x =
"Hello World!";

var x = "Hello
World!";

字符串?dāng)嘈行枰褂梅葱备?)

var x = "Hello
World!";

2.2 length屬性

Length:返回的是字符串的長(zhǎng)度

2.3 字符索引

[ ]方法：在字符串后面接中括號(hào)，中括號(hào)中寫數(shù)字。能夠訪問到字符串中的每個(gè)字符。

ps:索引一次只能索引一個(gè)字符，如果需要多個(gè)則需要用+連接符。

pss:索引從0開始，0表示第一個(gè)字符。

2.4 獲取指定位置字符

1.charAt(index):返回的是具體的字符

Index:就是字符串的位置（它是一個(gè)數(shù)字）

2.charCodeAt（index）返回的是字符對(duì)應(yīng)的Unicode編碼（ascii編碼值）

A:65 a:97 0:48

Index:就是字符串的位置（它是一個(gè)數(shù)字）

索引從0開始

字符編碼需要記得的兩個(gè)。A—65，a—97。其他符號(hào)累加即可。

fromCharCode將指定的數(shù)字(ascii碼值)轉(zhuǎn)為對(duì)應(yīng)的字符

2.5 字符串連接

concat()方法能夠?qū)蓚€(gè)字符串拼接起來，合成一個(gè)新的字符串。

可以認(rèn)為concat和+作用相同。至少在現(xiàn)階段我們可以認(rèn)為他們是沒有區(qū)別的

2.6模板字符串

模板字符串（template string）是增強(qiáng)版的字符串，用反引號(hào)（`）標(biāo)識(shí)。

模板字符串中嵌入變量，需要將變量名寫在${}之中。

三、轉(zhuǎn)義字符

3.1常見轉(zhuǎn)義字符

' 單引號(hào)

" 雙引號(hào)

反斜杠

n 換行

r 光標(biāo)到首行

t tab(制表符)

四、字符串對(duì)象

4.1 String字符串對(duì)象

javascript中有字符串類型string類型，我們也知道這種基本類型的變量的創(chuàng)建方式。

但javascript中還提供了另外一種字符串的聲明方式，這種方式叫字符串對(duì)象。使用 new 關(guān)鍵字將字符串定義為一個(gè)對(duì)象

New String();

4.2 字面量對(duì)象的簡(jiǎn)單使用

五、字符串方法(重點(diǎn))

5.1 字符串方法

(2).charAt（number）：返回當(dāng)前指定位置的字符

(3).charCodeAt(number)：返回當(dāng)前指定位置的字符ascii碼值

(4).concat:連接字符串

(5).substring(start,end):截取字符串(從哪里開始到哪里結(jié)束,end： 不包含end))

(6).substr(start,length):截取字符串（從哪里開始取多長(zhǎng)的字符）

(7).slice(start,end):截取字符串(end：不包含end)

.indexOf(str,offst)：返回當(dāng)前查找字符串在整個(gè)字符串中的首次位置，如果沒有返回-1

Str:字符串

Offset:從哪里開始查找

2..lastIndexOf:倒過來查找

3..trim():去掉字符串兩端的空格

4..toUpperCase和toLowerCase:大小寫轉(zhuǎn)換

.match:返回一個(gè)指定字符串的數(shù)組

.search:返回位置

.replace:替換字符串

.split:字符串切割，返回?cái)?shù)組

Es6新增的方法

• includes()：返回布爾值，表示是否找到了參數(shù)字符串。
• startsWith()：返回布爾值，表示參數(shù)字符串是否在原字符串的頭部。
• endsWith()：返回布爾值，表示參數(shù)字符串是否在原字符串的尾部。
• 這三個(gè)方法都支持第二個(gè)參數(shù)，表示開始搜索的位置。
• repeat方法返回一個(gè)新字符串，表示將原字符串重復(fù)n次。

ES2017 引入了字符串補(bǔ)全長(zhǎng)度的功能。如果某個(gè)字符串不夠指定長(zhǎng)度，會(huì)在頭部或尾部補(bǔ)全。padStart()用于頭部補(bǔ)全，padEnd()用于尾部補(bǔ)全。

padStart()和padEnd()一共接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是字符串補(bǔ)全生效的最大長(zhǎng)度，第二個(gè)參數(shù)是用來補(bǔ)全的字符串。

5.2 字符串Base64編碼

Base64本身是一種加密方式，可以將任意字符轉(zhuǎn)成可打印字符。

有時(shí)需要以文本格式傳遞二進(jìn)制數(shù)據(jù)，那么也可以使用 Base64 編碼。

而我們使用這種編碼方法，主要不是為了加密，而是為了不出現(xiàn)特殊字符，簡(jiǎn)化程序的處理。

javascript中字符串提供了兩個(gè)有關(guān)Base64編碼的方法：

btoa()：字符串或二進(jìn)制值轉(zhuǎn)為Base64編碼

atob()：Base64編碼轉(zhuǎn)為原來的編碼

encodeURIComponent()：要將非 ASCII 碼字符轉(zhuǎn)為 Base64 編碼

decodeURIComponent()：將轉(zhuǎn)碼后的內(nèi)容轉(zhuǎn)為非ASCII內(nèi)容

作業(yè)1：統(tǒng)計(jì)字符串中字母出現(xiàn)的次數(shù)

“ababcdeeeffhhljlkom”,統(tǒng)計(jì)這個(gè)字符串中每個(gè)字母出現(xiàn)的次數(shù)。

利用字符串的函數(shù)：

charCodeAt(i):返回指定位置的字符的ascii碼值 a:97,A：65

fromCharCode(97,98,99):返回指定ascii碼值的所指定的字符

charAt():返回指定位置的字符

第一種方法：

方法2：創(chuàng)建一個(gè)新的字符串，這個(gè)新的字符串是不重復(fù)的每個(gè)字符，然后和老的字符串中有重復(fù)的字符進(jìn)行比較，如果相等就累加。

indexOf():查找子字符串在整個(gè)字符串中首次出現(xiàn)的位置。（從前往后）

lastIndexOf():查找子字符串在整個(gè)字符串中最后一次出現(xiàn)的位置。（從后往前）

方法3：利用對(duì)象的方式進(jìn)行字符串的累加

Try-catch語句的使用

六、字符串實(shí)例

6.1定時(shí)器的簡(jiǎn)單使用

setInterval():定時(shí)器，

按照指定的時(shí)間，重復(fù)的執(zhí)行函數(shù)表達(dá)式

setInterval(function(){},毫秒數(shù))

6.2 實(shí)例：打字機(jī)效果（動(dòng)畫）

setTimeout():延時(shí)器

Canvans畫布

方法1：通過substring()或者substr()或者是slice()這三個(gè)函數(shù)截取字符串

方法2:通過數(shù)組的方式來訪問字符串中字符

6.3 實(shí)例：幸運(yùn)數(shù)字（0-10000）,800

6.4 實(shí)例：金字塔

Str = “abcdefg”;

A

Ab

Abc

Abcd

6.5 實(shí)例：抽獎(jiǎng)效果(動(dòng)畫)

分析一下：How to create your code?

setInterval():

獎(jiǎng)品存放在數(shù)組中，隨機(jī)抽獎(jiǎng)（Math.random()）

將結(jié)果存放到文本框中

總結(jié)

以上是生活随笔為你收集整理的切割 字符串_web前端如何使用字符串的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。