作業(yè)
- 字符串是什么
- 字符串類型是什么
- 創(chuàng)建字符串的方法
- 創(chuàng)建字符串字面量的語(yǔ)法
- 字符串的特點(diǎn)
- 字符串用法1：查詢字符串長(zhǎng)度
- 用法2：連接字符串
- 用法3：比較字符串
- 用法4：查詢索引
- 用法5：查詢字符
- 用法6：查詢字符編碼
- 用法7：提取字符
- 字符串對(duì)象
- 包裝對(duì)象
字符串是什么
定義
字符串就是使用引號(hào)括起來的字符序列漩绵。
字符串類型是什么
- 字符串就是
string -
string是一種數(shù)據(jù)類型碍粥，用于表示js程序中的文本着帽。 -
string是一個(gè)不可修改的16位值的有序序列怖喻。 - 每個(gè)字符對(duì)應(yīng)一個(gè)或多個(gè)16位存儲(chǔ)單元厉膀。
-
string的長(zhǎng)度表示字符編碼的個(gè)數(shù)驼壶，并非字符的個(gè)數(shù)粟焊。
'張三'
'hello world'
'\uD83D\uDE00' //??
'??'.length // 2
'e\u0301' //'é'
'é'.length // 2
'\ud83d\udc99' //??
'??'.length // 2
創(chuàng)建字符串的方法
方法一：創(chuàng)建字符串字面量
字符串字面量
- 字符串字面量指直接出現(xiàn)在程序中的字符串付魔，而不是以變量形式出現(xiàn)的字符串逢渔。
- 字符串字面量是由單引號(hào)或雙引號(hào)或反引號(hào)括起來的字符序列肋坚。
用法1：使用引號(hào)定界
'hello world'
"hello world"
`hello world`
用法2：引號(hào)嵌套規(guī)則
外單內(nèi)雙 單引號(hào)定界的字符串中可以包含雙引號(hào)，不能包含單引號(hào)
'<div class="box"></div>' //正確肃廓。外單內(nèi)雙
'<div class='box'></div>' //錯(cuò)誤智厌。定界錯(cuò)誤
外雙內(nèi)單：雙引號(hào)定界的字符串中可以包含單引號(hào)，不能包含雙引號(hào)
"<div class='box'></div>" //正確盲赊。外雙內(nèi)單
"<div class="box"></div>" //錯(cuò)誤铣鹏。定界錯(cuò)誤
外反：反引號(hào)定界的字符串中可以包含單引號(hào)或雙引號(hào)
`<div class='box'></div>` //正確
`<div class="box"></div>` //正確
用法3：轉(zhuǎn)義符 - 即反斜線\。
反斜線在JavaScript中有著特殊用途哀蘑。反斜線后加一個(gè)字符诚卸，該字符就不再表示該字符的字面意思了。
'It\'s true.' //正確绘迁。轉(zhuǎn)義符后面的單引號(hào)不再表示字符串定界符
"<div class=\"box\"></div>" //正確合溺。轉(zhuǎn)義符后面的雙引號(hào)不再表示字符串定界符
用法4：換行
使用單引號(hào)或雙引號(hào)定界的字符串不能換行。
'滾滾長(zhǎng)
江東逝水' //錯(cuò)誤缀台。單引號(hào)定界的字符串必須寫在一行內(nèi)
'滾滾長(zhǎng)\
江東逝水' //正確棠赛。反斜線后面的行結(jié)束符(不可見符號(hào))被轉(zhuǎn)義，即行結(jié)束符不再表示行結(jié)束
使用反引號(hào)定界的字符串可以換行
let str = ''
str += `<ul>
<li>列表項(xiàng)</li>
</ul>
`
用法5：模版字符串
使用反引號(hào)定界的字符串也被稱為”模版字符串“膛腐。模版字符串可以包含js表達(dá)式睛约。
let name = '張三';
console.log(`Hello ${ name }`) // 'hello 張三'
方法二：創(chuàng)建字符串對(duì)象
String對(duì)象用于表示和操作字符序列。
創(chuàng)建字符串對(duì)象
String對(duì)象可以通過String()構(gòu)造函數(shù)創(chuàng)建哲身。
const str = new String("hello world")
console.log(str) //返回 'hello world'
字符串的特點(diǎn)
特點(diǎn)1：字符串是不可變的
字符串是固定不變的辩涝，類似replace()和toUpperCase()的方法都返回新字符串，原字符串本身并沒有發(fā)生改變勘天。字符串相當(dāng)于只讀數(shù)組怔揩。
let arr = [1,2,3]
arr[1] = 5
console.log(arr) //數(shù)組元素可以修改
let str = '123'
str[1] = 5
console.log(str) //字符串元素不可以修改
特點(diǎn)2：字符串是有索引的
- 字符串的索引從0開始
- 第一個(gè)字符的位置是0
- 第二個(gè)字符的位置是1
- 最后一個(gè)字符的位置： str[str.length - 1]
特點(diǎn)3：字符串是有長(zhǎng)度的
用法1：查詢字符串長(zhǎng)度
- 字符串的長(zhǎng)度是指字符串中包含單個(gè)字符的個(gè)數(shù)棍丐。
- 空字符串的長(zhǎng)度為0。
- 可使用
length屬性查詢字符的長(zhǎng)度沧踏。
var str = 'hello'
var len = str.length
console.log(len) //5
案例1
用法2：連接字符串
方法1：使用加號(hào)操作符
- 如果將加號(hào)(+)運(yùn)算符用于數(shù)字，表示兩數(shù)相加巾钉；
- 如果將加號(hào)(+)運(yùn)算符用于字符串翘狱，則表示字符串連接。
方法2：string.concat()
concat() 方法將字符串參數(shù)連接到調(diào)用字符串并返回一個(gè)新字符串砰苍。
const str1 = 'Hello';
const str2 = 'World';
console.log(str1.concat(' ', str2));
// expected output: "Hello World"
console.log(str2.concat(', ', str1));
// expected output: "World, Hello"
語(yǔ)法
concat(str1)
concat(str1, str2)
concat(str1, str2, /* …, */ strN)
用法3: 比較字符串
在JS中潦匈，字符串是可以比較的，但是只能使用大于赚导、小于操作符比較茬缩。
const str1 = 'a'
const str2 = 'b'
if( str1 > str2){
console.log(`${str1}大于${str2}`)
} else if(str2 > str1){
console.log(`${str2}大于${str1}`)
} else {
console.log(`${str1}等于${str2}`)
}
用法4: 查詢索引
string.indexOf()
indexOf() 方法返回指定字符串在調(diào)用字符串中第一次出現(xiàn)的位置。
- 如果未找到吼旧，則返回-1凰锡。
- 對(duì)大小寫敏感
- 不能使用正則表達(dá)式
語(yǔ)法
indexOf(searchString)
indexOf(searchString, start)
- searchString: 要搜索的子字符串
- start: 搜索的開始位置。默認(rèn)是0
string.lastIndexOf()
Returns the index (position) of the last occurrence of a value in a string
string.search()
返回指定值或正則表達(dá)式匹配到的字符串的索引圈暗。
用法5: 查詢字符
string.charAt()
Returns the character at a specified index (position)
string.charCodeAt()
Returns the Unicode of the character at a specified index掂为。
案例
用法6：查詢字符編碼
string.fromCharCode()
返回Unicode編碼對(duì)應(yīng)的字符。
案例
用法7：提取字符
方法1：String.prototype.slice()
定義：返回提取的字符串员串。（slice方法也可操作數(shù)組)
語(yǔ)法：
slice(indexStart)
slice(indexStart, indexEnd)
參數(shù)：
-
indexStart: 提取的起始/包含位置(包含該位置的字符)勇哗。可以是負(fù)值寸齐。含頭 -
indexEnd: 可選欲诺。提取的結(jié)束/排除位置(不包含該位置的字符)∶祓校可以是負(fù)值扰法。不含尾
返回值: 提取的子字符串。
示例：
const str = '0123456789';
/*****沒有值*****/
//start=0 end=str.length-1
console.log(str.slice()); // "hello"
console.log(str.substring()); // "hello"
/*****一個(gè)值*****/
//end=str.length-1
console.log(str.slice(2)); //"llo"
console.log(str.substring(2)); //"llo"
//if start == nagative, end = str.length-1
console.log(str.slice(-2));// "lo"
console.log(str.substring(-2));// "Hello"
//if start >= str.length 則返回空字符串
console.log(str.slice(5)); //""
console.log(str.substring(5)); //""
//if start == undefined ||NaN||null start = 0
console.log(str.slice(undefined)); // "hello"
console.log(str.substring(undefined)); // "hello"
console.log(str.slice(NaN)); // "hello"
console.log(str.substring(NaN)); // "hello"
console.log(str.slice(null)); // "hello"
console.log(str.substring(null)); // "hello"
/*****兩個(gè)值*****/
//正值
console.log(str.slice(2, 4));//"ll"
console.log(str.substring(2, 4));//"ll"
//負(fù)值
console.log(str.slice(-4, -2)); // "el"
console.log(str.substring(-4, -2)); // ""
//if end <= start 則返回空字符串
console.log(str.slice(4, 2));//""
console.log(str.substring(4, 2));//"ll"
console.log(str.slice(-2, -4));//""
console.log(str.substring(-2, -4));//""
案例2
- 截取粘貼的文本
- 駝峰轉(zhuǎn)換
substr()
Extracts a number of characters from a string, from a start index (position)
String.prototype.substring()
substring()方法返回提取的字符串海铆。
語(yǔ)法
substring(indexStart)
substring(indexStart, indexEnd)
- indexstart:提取字符串的起始(包含)位置,不可以是負(fù)值迹恐。含頭
- indexend: 提取字符串的結(jié)束(排除)位置，不可以是負(fù)值卧斟。不含尾
返回值：新字符
示例：
const str = '0123456789';
/*****沒有值*****/
//start=0 end=str.length-1
console.log(str.slice()); // "hello"
console.log(str.substring()); // "hello"
/*****一個(gè)值*****/
//end=str.length-1
console.log(str.slice(2)); //"llo"
console.log(str.substring(2)); //"llo"
//if start == nagative, end = 0
console.log(str.slice(-2));// "lo"
console.log(str.substring(-2));// "Hello"
//if start >= str.length 則返回空字符串
console.log(str.slice(5)); //""
console.log(str.substring(5)); //""
//if start == undefined ||NaN||null start = 0
console.log(str.slice(undefined)); // "hello"
console.log(str.substring(undefined)); // "hello"
console.log(str.slice(NaN)); // "hello"
console.log(str.substring(NaN)); // "hello"
console.log(str.slice(null)); // "hello"
console.log(str.substring(null)); // "hello"
/*****兩個(gè)值*****/
//正值
console.log(str.slice(2, 4));//"ll"
console.log(str.substring(2, 4));//"ll"
//負(fù)值
console.log(str.slice(-4, -2)); // "el"
console.log(str.substring(-4, -2)); // ""
//if end <= start 則交換start和end
console.log(str.slice(4, 2));//""
console.log(str.substring(4, 2));//"ll"
console.log(str.slice(-2, -4));//""
console.log(str.substring(-2, -4));//""
檢測(cè)字符串
includes()
返回字符串是否包含指定值
endsWith()
檢測(cè)字符串是否以指定值結(jié)尾
startsWith()
檢測(cè)字符串是否以指定字符開頭殴边。
案例
檢索字符串
match()
在字符串中搜索值或正則表達(dá)式，并返回匹配項(xiàng)珍语。
repeat()
返回具有多個(gè)字符串副本的新字符串锤岸。
replace()
返回指定值或正則表達(dá)式替換后的字符串。
字符串轉(zhuǎn)數(shù)組
String.prototype.split()
split()方法通過分隔符把字符串分隔為一個(gè)數(shù)組板乙。
語(yǔ)法
split()
split(separator)
split(separator, limit)
- separator: 分隔符是偷，即分隔字符的模式拳氢。分隔符可以是：
- 字符串
- RegExp
- limit: (可選) 指定返回?cái)?shù)組的長(zhǎng)度。非負(fù)整數(shù)蛋铆。
- 如果是0馋评，則返回空數(shù)組。
示例：
const str = 'hello world'
const arr1 = str.split()
console.log(arr1)//['hello world']
const arr2 = str.split('')
console.log(arr2) //['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']
const arr3 = str.split(' ')
console.log(arr3) //['hello', 'world']
const arr4 = str.split('o')
console.log(arr4) //['hell', ' w', 'rld']
const arr5 = str.split('l')
console.log(arr5) //['he', '', 'o wor', 'd']
大小寫轉(zhuǎn)換
toLowerCase()
返回轉(zhuǎn)換為小寫字母的字符串刺啦。
toUpperCase()
返回轉(zhuǎn)換為大寫字母的字符串留特。
案例
toLocaleLowerCase()
返回轉(zhuǎn)換為本地語(yǔ)言的小寫字母的字符串。
toLocaleUpperCase()
返回轉(zhuǎn)換為本地語(yǔ)言的大寫字母的字符串玛瘸。
去空白
trim()
Returns a string with removed whitespaces
trimEnd()
Returns a string with removed whitespaces from the end
trimStart()
Returns a string with removed whitespaces from the start
valueOf()
用于把字符串對(duì)象轉(zhuǎn)換成字符串直接量蜕青。
toString()
返回字符串直接量或字符串對(duì)象。
包裝對(duì)象
包裝對(duì)象是指存取字符串的屬性時(shí)創(chuàng)建的臨時(shí)對(duì)象糊渊，被稱為包裝對(duì)象右核。
思考：字符串既然不是對(duì)象，為什么它會(huì)有屬性和方法呢渺绒？
var str = 'hello'
var len = str.length
console.log(len) // 返回5
原因：只要引用了字符串str的屬性贺喝，JavaScript就會(huì)將字符串值通過調(diào)用new String(str)的方式臨時(shí)轉(zhuǎn)換成對(duì)象，這個(gè)對(duì)象就是包裝對(duì)象宗兼，它繼承了字符串的方法搜变，并用來處理屬性的引用，一旦屬性引用結(jié)束针炉，包裝對(duì)象就會(huì)被立刻銷毀挠他。
思考：可以為包裝對(duì)象的屬性賦值嗎？
var str1 = 'hello world'
console.log(typeof str1) //string
console.log(str1.length) //調(diào)用包裝對(duì)象讀取str1的length屬性篡帕，隨即銷毀
str1.attr = 100//試圖為包裝對(duì)象的屬性賦值殖侵，則會(huì)忽略這個(gè)操作
console.log(str1.attr) // 返回undefined
var str2 = new String("hello world")
console.log(typeof str2) //object
str2.attr = 200
console.log(str2.attr) // 返回200
