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() 实例方法访问字符串中的字符。

区别浏览器最低版本要求是否支持负数索引索引超出范围
[]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.字符串长度

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

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日
下一篇 2020年9月3日

相关推荐

  • 2.12JavaScript语言的可见性(Visibility)

    JavaScript 语言成员的可见性只支持 public 和 private,不支持 protected。 成员的可见性默认是 public,无需在成员标识符前显式添加。 可以通过在成员标识符前添加 # 的方式来声明 private 成员,# 也是标识符的一部分,所以操作 private 成员时必须带上 #。 目前,…

  • 2.3JavaScript原始类型之符号(Symbol)

    一个符号实例用于表示一个唯一的标识符。 1.创建符号实例 注意:符号实例不支持字面量创建方式。 注意:符号实例不支持 new Symbol() 创建方式。 Symbol() 函数可选地接受一个字符串实参,字符串实参仅仅作为对符号实例的描述,将来可以通过这个字符串实参来调试代码,不影响任何事情。 Symbol() 函数的…

  • 2.9JavaScript引用类型之生成器(Generator)

    Generator 类型实现了 Iterable 接口。 1.生成器函数声明 生成器函数声明只需要在函数名前面加一个星号 * 即可,星号 * 不受两侧空格的影响。 生成器函数支持函数声明、函数表达式,不支持箭头函数表达式。 2.yield和yield * yield 关键字用来多次暂停和恢复一个生成器函数,它…

发表回复

登录后才能评论