2.2JavaScript原始类型之字符串(String)

1.单引号和双引号字符串字面量

JavaScript 语言的单引号和双引号字符串字面量语法上没有区别,所以以下一并讲解。

//单引号字符串字面量表达式的返回值
let s1 = 'hello';
s1;  // "hello"
typeof s1;  // "string"

//双引号字符串字面量表达式的返回值
let s2 = "hello";
s2;  // "hello"
typeof s2;  // "string"

单引号和双引号字符串字面量支持所有转义序列。

单引号和双引号字符串字面量不支持字符串插值。

单引号和双引号字符串字面量支持在每行末尾添加一个转义字符反斜杠 \ 转义隐式的换行符从而跨多行编写一行代码。注意:转义字符反斜杠 \ 以及后面的隐式的换行符不占用字符。

let str1 = 'one\
long\
line';

let str2 = "one\
long\
line";

console.log(str1);
console.log(str2);
//都输出
onelongline
onelongline

单引号和双引号字符串字面量不支持隐式的换行符。

let c = 'first line
second line';

console.log(c);
//报错
Uncaught SyntaxError: "" string literal contains an unescaped line break

单引号和双引号字符串字面量不支持带标签。

2.模板字面量(Template Literal)

//模板字面量表达式的返回值
let s = `hello`;
s;  // "hello"
typeof s;  // "string"

模板字面量支持所有转义序列。

模板字面量支持字符串插值。

模板字面量支持在每行末尾添加一个转义字符反斜杠 \ 转义隐式的换行符从而跨多行编写一行代码。

注意:转义字符反斜杠 \ 以及后面的隐式的换行符不占用字符。

let str3 = `one\
long\
line`;

console.log(str3);
//输出
onelongline

模板字面量支持隐式的换行符。注意:此隐式的换行符占用一个字符。

let s = `first line
second line`;

console.log(s);
//输出
first line
second line

模板字面量支持带标签(tag)。

标签函数名`模板字面量`;

标签函数名与普通函数名一样,没有特殊性。

传递给标签函数的实参 `模板字面量` 的外围无圆括号。

带标签的模板字面量的返回值就是标签函数的返回值。

标签函数与普通函数一样,没有特殊性。

标签函数的第一个形参接受一个被插值记号 ${} 分隔的字符串组成的数组,其余的表达式形参与模板字面量中的表达式的值按顺序一一对应。注意:对于有 n 个插值的模板字面量,传递给标签函数的表达式形参的个数始终是 n,而传递给标签函数的第一个形参所包含的字符串个数则始终是 n + 1

标签函数的返回值,可以返回处理好的的字符串 或者 可以返回完全不同的东西(不一定返回字符串)。

const person = "Mike";
const age = 28;

function myTag(strings, personExp, ageExp) {
  const str0 = strings[0]; // "That "
  const str1 = strings[1]; // " is a "
  const str2 = strings[2]; // "."

  const ageStr = ageExp < 100 ? "youngster" : "centenarian";

  return `${str0}${personExp}${str1}${ageStr}${str2}`;
}

const output = myTag`That ${person} is a ${age}.`;

console.log(output);

//输出
That Mike is a youngster.
//注意:对于有n个插值的模板字面量,传递给标签函数的表达式形参的个数始终是n,而传递给标签函数的第一个形参所包含的字符串个数则始终是n+1。
let a = 6;
let b = 9;
function simpleTag(strings, ...exp) {
  console.log(strings);
}

simpleTag`${ a } + ${ b } = ${ a + b }`;

//输出
[ "", " + ", " = ", "" ]

3.访问字符串中的字符

可以把字符串当成由字符组成的数组,所以可以使用类似数组中变量名后跟方括号 [] 包含索引的方式来访问字符串中索引对应的字符。

另外,还可以使用 charAt()at() 实例方法访问字符串中索引对应的字符。

注意:负数索引 index,本质上是 str.length + index 的正数索引。

区别浏览器最低版本要求是否支持负数索引不存在的索引
[]Chrome 1、Firefox 1、Safari 1。不支持返回 undefined
charAt()Chrome 1、Firefox 1、Safari 1。不支持返回 空字符串
at()Chrome 92、Firefox 90、Safari 15.4。支持返回 undefined
//[]
//正数索引从左往右从0开始,不支持负数索引。
//查看
let a = str[索引];

//添加或更改(不支持此语法)
str[索引] = 值;
//charAt()
//正数索引从左往右从0开始,不支持负数索引。
//查看
let a = str.charAt(索引);

//添加或更改(不支持此语法)
str.charAt(索引) = 值;
//at()
//正数索引从左往右从0开始,负数索引从右往左从-1开始。
//查看
let a = str.at(索引);

//添加或更改(不支持此语法)
str.at(索引) = 值;

4.字符串长度

无论是单引号和双引号字符串字面量、模板字面量,一个空格占用一个字符。

注意:length 属性是只读的。

//查看长度
let len = str.length;

5.字符串连接

可以使用加号 + 连接字符串,表达式的返回值的类型只可以为 字符串类型(包括空字符串)。

let value = 5;
let exponent = 'second';

let interpolatedString = value + ' to the ' + exponent + ' power is ' + (value * value);

interpolatedString;  // "5 to the second power is 25"

6.字符串插值

花括号 {} 内可以为任何 JavaScript 表达式,具体参考“表达式语句”章节。

表达式的返回值的类型只可以为 字符串类型(包括空字符串),最终字符串引号内的内容会替代美元符号、花括号以及花括号内的所有内容,即 ${ 表达式 }

${ 表达式 }
let value = 5;
let exponent = 'second';

let interpolatedTemplateLiteral = `${ value } to the ${ exponent } power is ${ value * value }`;

interpolatedTemplateLiteral;  // "5 to the second power is 25"

7.转义序列(Escape Sequence)

转义序列是由转义字符(escape character)反斜杠 \ 和 跟在它后面的 1 个或多个字符构成的字符序列。

\1个或多个字符

转义序列,顾名思义,就是转义字符反斜杠 \ 转换了跟在它后面的字符的通常含义,从而实现在字符串中表示一个无法直接表示的字符。

注意:单引号、双引号、反引号中的任何一种都可以直接嵌入到另外两种引号的字符串中,但如果嵌入到同一种引号的字符串中时,需要转义。

注意:一个转义序列(包括转义字符反斜杠 \ 以及跟在它后面的字符)只占用一个字符。

注意:如果转义字符反斜杠 \ 的后面未跟任何字符(无论显式还是隐式),此时转义字符反斜杠 \ 无法完成转义,会报错 Uncaught SyntaxError: invalid escape sequence

注意:如果转义字符反斜杠 \ 位于以下表中之外的字符前面,则转义字符反斜杠 \ 会被忽略。

转义序列表示的字符
\0(\u0000)空白(Null)符
\b(\u0008)退格符
\n(\u000A)换行符
\t(\u0009)水平制表符
\v(\u000B)垂直制表符
\r(\u000D)回车符
\f(\u000C)换页符
\\(\u005C)反斜杠(\)符
\'(\u0027)单引号(')符
\"(\u0022)双引号(")符
\`(\u0060)反引号(`)符
\xnn由 2 个十六进制数字 nn (00~FF00~ff)表示的总计 162 个 Unicode 字符。例如 \xA9 表示版权符号 "©"
\unnnn由 4 个十六进制数字 nnnn (0000~FFFF0000~ffff)表示的总计 164 个 Unicode 字符。例如 \u00A9 表示版权符号 "©"
\u{n~nnnnnn}由 1 到 6 个十六进制数字 n~nnnnnn (0~10FFFF0~10ffff)表示的现存的所有 Unicode 字符。例如 \u{1f600} 表示开口笑表情 "😀"

原创文章,作者:huoxiaoqiang,如若转载,请注明出处:https://www.huoxiaoqiang.com/javascript/javascriptlang/20580.html

(0)
huoxiaoqiang的头像huoxiaoqiang
上一篇 2020年9月1日 18:00
下一篇 2020年9月3日 02:23

相关推荐

  • 2.6JavaScript引用类型之映射(Map)

    1.映射声明 与对象只能使用字符串、数字或符号作为键不同,映射可以使用任何 JavaScript 数据类型作为键。与对象一样,映射的值可以是任何数据类型。 2.访问映射 3.获取映射长度

  • 1.1JavaScript语言的注释(Comment)

    1.行(Line)注释 行注释使同一行中紧跟 // 后的所有文本都成为注释。 2.块(Block)注释 块注释使 /* 和 */ 之间的无论是单行还是多行的所有文本都成为注释。 3.Hashbang注释 Hashbang 注释用于当 JavaScript 脚本文件直接在 shell 中运行时以指定 JavaScript…

  • 1.8JavaScript语言的语句(Statement)

    1.空(Empty)语句 空语句只使用一个分号 ; 表示,表示不提供任何语句。与空语句相反的是块语句。 比如,以下的例子将 for 循环语句后的 {} 替换为 ;。 2.块(Block)语句 块(Block)语句又被称为代码块(Code Block)语句。 块语句由一对花括号 {} 组成,花括号内部包括零条或多条语句。…

发表回复

登录后才能评论