ES6學(xué)習(xí)筆記 篇二 字符串的用法與擴展

本文是一系列就阮一峰的《ECMAScript 6 入門》的學(xué)習(xí)筆記。
篇零:ES6學(xué)習(xí)筆記 篇零 變量聲明
篇一:ES6學(xué)習(xí)筆記 篇一 賦值(傳值 引用 解構(gòu))


轉(zhuǎn)義字符

除了普通的可打印字符以外,一些特殊有特殊功能的字符可以通過轉(zhuǎn)義字符的形式放入字符串中:

Code Output
\0 空字符
\' 單引號
\" 雙引號
\\ 反斜杠
\n 換行
\r 回車
\v 垂直制表符
\t 水平制表符
\b 退格
\f 換頁
\uXXXX unicode 碼
\u{X} ... \u{XXXXXX} unicode codepoint
\xXX Latin-1 字符(x小寫)

題外話:簡單復(fù)習(xí)一下編碼的知識:
8位(bit)= 1字節(jié)(byte) => 8b = 1B
1kB = 1024B

它對世界上大部分的文字系統(tǒng)進(jìn)行了整理、編碼,使得電腦可以用更為簡單的方式來呈現(xiàn)和處理文字。

大家都知道計算機的最底層實現(xiàn)是靠二進(jìn)制,也就是1和0。最早的時候,用晶體管的明滅(0,1)來做計算,當(dāng)時規(guī)定8個晶體管的狀態(tài)為一“字節(jié)”,而這八位的字節(jié)也就共可以組合出256(2^8)種不同的狀態(tài)。
0×20以下的字節(jié)狀態(tài)稱為”控制碼”,又將剩下的位置編碼城空格逗號分號等符號和大小寫字母。但各國文字符號等多有不同,一些制表符、特殊字符等也被編入其中,128 到255這一頁的字符集被稱”擴展字符集“。
gb2312就是漢字的一種編碼方式。用這種方式存儲、解讀的文字將會展現(xiàn)出此漢字規(guī)則下字符。
所以,編碼方式,就是計算機展示字符所對應(yīng)的不同規(guī)則。按照規(guī)則展示出相應(yīng)的字符。

模板字面量

模板字面量/Template literals 是允許嵌入表達(dá)式的字符串字面量。你可以使用多行字符串和字符串插值功能。

其實就是我們可以更方便的在一個固定格式的字符串中變更部分信息。

例如在url中使用。
eg:

<Link to={`/mainpage/profilechange/${userid}`}> 更改昵稱 </Link>
let name = 'Molly', age = '22';
`I'm ${name}, I'm ${age} years old.`

output--> 'I'm Molly, I'm 22 years old.'

它的標(biāo)志就是整個字符串用反引號`包裹,而不是用單引號。在變量的部分使用${}包裹。

①如果模板的字符串中需要展示反引號`,則需要用反斜杠\作為轉(zhuǎn)譯(如同正則的反斜杠轉(zhuǎn)譯)。
eg:

let greeting = `\`Hello\` World!`;
console.log(greeting);
output--> `Hello` World!

②如果${}包裹中的變量名未定義,會報錯。xxx is not defined。

③如果大括號內(nèi)為字符串,那么將直接輸出此字符串。
eg:

`Hello ${'Molly'}`
output--> 'Hello Molly'

④如果大括號內(nèi)為對象,則會自動調(diào)用toString()方法。
eg:

`Hello ${['Molly', 'Fool']}`
output--> 'Hello Molly,Fool'

`Hello ${{'1': 'Molly', '2': 'Fool'}}`
output--> 'Hello [object Object]'

⑤可以多層嵌套
eg:

let a = 'Molly';
let b = 'Fool';
`Hello ${a,`$`}`;


多行字符串

我們都知道字符串中是不允許換行的,比如:

var str = '1223
234';
VM542:1 Uncaught SyntaxError: Invalid or unexpected token

如果需要換行,那就需要用到轉(zhuǎn)譯字符,\n。
但在模板字符串中,我們可以用這樣的方法:

console.log(`string text line 1
string text line 2`);

output-->
string text line 1
string text line 2

反引號包裹字符串,可以在字符串內(nèi)自行換行。

表達(dá)式插補

①在字符串中進(jìn)行一些js的操作,我們之前是這么做的:

var a = 5;
var b = 3;
console.log('Lily is ' + (a + b) + 'years old' + ' and \nher brother is ' + (a * b) + '.');

output-->
'Lily is 8years old and 
her brother is 15.'

我們可以使用反引號進(jìn)行這樣優(yōu)雅的操作:

var a = 5;
var b = 3;
console.log(`Lily is ${a + b} years old and
her brother is ${a * b}`);

output-->
Lily is 8 years old and
her brother is 15

②我們還可以直接調(diào)用對象中的屬性:

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`;

output--> ’3‘

反引號的使用讓我們在字符串中使用一些簡單的js操作看起來十分的優(yōu)雅簡潔。

③模板字符串之中我們還可以直接調(diào)用函數(shù):

function fn() {
  return "Hello World";
}
`Amy said '${fn()}' !`

output-->
'Amy said 'Hello World' !'

以上是一些常用的字符串的用法。
本系列會持續(xù)更新。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容