简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  JavaScript 문자열의 일반적인 기본 방법에 대한 자세한 소개

JavaScript 문자열의 일반적인 기본 방법에 대한 자세한 소개

WBOY
WBOY앞으로
2022-05-25 11:59:052640검색

이 글에서는 javascript에 대한 관련 지식을 소개하는데, 주로 문자열에 대한 관련 지식을 소개합니다. 주로 사용되는 기본 메소드, 특수 문자, 이모티콘 내부 표현 등에 대해 소개합니다. 함께 살펴보시기 바랍니다. 그것은 모두에게 도움이 됩니다.

"JavaScript

[관련 권장 사항: javascript 비디오 튜토리얼, 웹 프론트 엔드]

어떤 프로그래밍 언어이든 문자열은 중요한 데이터 유형입니다. JavaScript 코드에 대해 자세히 알아보려면 저를 팔로우하세요. >끈 지식! <code>JavaScript字符串知识吧！

前言

字符串就是由字符组成的串，如果学习过C、Java就应该知道，字符本身也可以独立成为一个类型。但是，JavaScript没有单个的字符类型，只有长度为1的字符串。

JavaScript的字符串采用固定的UTF-16编码，不论我们编写程序时采用何种编码，都不会影响。

写法

字符串有三种写法：单引号、双引号、反引号。

let single = 'abcdefg';//单引号let double = "asdfghj";//双引号let backti = `zxcvbnm`;//反引号

单、双引号具有相同的地位，我们不做区分。

字符串格式化

反引号允许我们使用${...}优雅的格式化字符串，取代使用字符串加运算。

let str = `I'm ${Math.round(18.5)} years old.`;console.log(str);

代码执行结果：

"JavaScript

多行字符串

反引号还可以允许字符串跨行，当我们编写多行字符串的时候非常有用。

let ques = `Is the author handsome?
A. Very handsome;
B. So handsome;
C. Super handsome;`;console.log(ques);

代码执行结果：

"JavaScript

是不是看起来觉得也没有什么？但是使用单双引号是不能实现的，如果想要得到同样的结果可以这么写：

let ques = 'Is the author handsome?\nA. Very handsome;\nB. So handsome;\nC. Super handsome;';console.log(ques);

以上代码包含了一个特殊字符n，它是我们编程过程中最常见的特殊字符了。

特殊字符

字符n又名"换行符"，支持单双引号输出多行字符串。当引擎输出字符串时，若遇到n，就会另换一行继续输出，从而实现多行字符串。

虽然n看起来是两个字符，但是只占用一个字符位置，这是因为在字符串中是转义符，被转义符修饰的字符就变成了特殊字符。

特殊字符列表

문자열은 문자로 구성된 문자열입니다. C와 Java를 공부했다면 문자 자체도 가능하다는 것을 알아야 합니다. 독립적으로 유형이 됩니다. 그러나 JavaScript에는 단일 문자 유형이 없으며 길이가 1인 문자열만 있습니다. JavaScript 문자열은 고정된 UTF-16 인코딩을 사용합니다. 프로그램을 작성할 때 어떤 인코딩을 사용하더라도 영향을 받지 않습니다.
特殊字符 描述
n 换行符，用于新起一行输出文字。
r 回车符，将光标移到行首，在Windows系统中使用rn表示一个换行，意思是光标需要先到行首，然后再到下一行才可以换一个新的行。其他系统直接使用n就可以了。
' " 单双引号，主要是因为单双引号是特殊字符，我们想在字符串中使用单双字符就要转义。
\ 反斜杠，同样因为是特殊字符，如果我们就是想输出本身，就要对其转义。
b f v 退格、换页、垂直标签——已经不再使用。
xXX 编码为XX的十六进制Unicode字符，例如：x7A表示z（z的十六进制Unicode编码为7A）。
uXXXX 编码为XXXX的十六进制Unicode字符，例如：u00A9表示 © 。
u{X...X}（1-6个十六进制字符） UTF-32编码为X...X的Unicode

머리말

쓰기

🎜문자열을 쓰는 방법에는 작은따옴표, 큰따옴표, 백틱의 세 가지가 있습니다. 🎜
console.log('I\'m a student.');// \'console.log("\"I love U\"");// \"console.log("\n is new line character.");// \nconsole.log('\u00A9')// ©console.log('\u{1F60D}');//
🎜작은따옴표와 큰따옴표는 동일한 상태이므로 구분하지 않습니다. 🎜🎜문자열 형식 지정🎜🎜백틱을 사용하면 문자열 추가를 사용하는 대신 ${...}를 사용하여 문자열 형식을 우아하게 지정할 수 있습니다. 🎜
console.log("I'm a student.");
//双引号中使用单引号console.log('"" is used.');
//单引号中使用双引号console.log(`' " is used.`);
//反引号中使用单双引号
🎜코드 실행 결과: 🎜🎜"JavaScript🎜 🎜여러 줄 문자열🎜🎜백틱을 사용하면 문자열을 여러 줄로 확장할 수도 있는데, 이는 여러 줄 문자열을 작성할 때 매우 유용합니다. 🎜
console.log("HelloWorld\n".length);//11
🎜코드 실행 결과: 🎜🎜"Javascript🎜🎜별거 없어보이는데요? 하지만 작은따옴표와 큰따옴표를 사용하면 이를 달성할 수 없습니다. 동일한 결과를 얻으려면 다음과 같이 작성할 수 있습니다. 🎜
let str = "The author is handsome.";
console.log(str[0]);//Tconsole.log(str[4]);//aconsole.log(str[str.length-1]);//.
🎜위 코드에는 가장 일반적으로 사용되는 특수 문자 n이 포함되어 있습니다. 프로그래밍 프로세스 문자의 특수 문자입니다. 🎜

특수 문자

🎜문자 n("개행 문자"라고도 함)은 작은 따옴표와 큰 따옴표를 지원하여 여러 줄 문자열을 출력합니다. 엔진이 문자열을 출력할 때 n을 만나면 계속해서 다른 줄에 출력하여 여러 줄의 문자열을 구현합니다. 🎜🎜n은 두 문자처럼 보이지만 문자열에서 가 이스케이프 문자이기 때문에 한 문자 위치만 차지합니다. 이스케이프 문자로 수정하면 특수 문자가 됩니다. 🎜🎜특수문자 목록🎜🎜
특수문자 설명
n🎜 줄 바꿈 문자로, 출력 텍스트의 새 줄을 시작하는 데 사용됩니다. 🎜🎜
r🎜 캐리지 리턴 문자, 커서를 줄의 시작 부분으로 이동, Windows에서 rn사용 > system >은 줄바꿈을 나타냅니다. 즉, 커서가 먼저 줄의 시작 부분으로 이동한 후 다음 줄로 이동해야 새 줄로 변경될 수 있습니다. 다른 시스템에서는 n을 직접 사용할 수 있습니다. 🎜🎜
' "🎜 작은따옴표와 큰따옴표, 주로 작은따옴표와 큰따옴표는 특수 문자이므로 작은따옴표를 사용하고 싶습니다. 및 문자열의 큰따옴표 이중 문자는 🎜🎜
\🎜 백슬래시로 이스케이프해야 합니다. 이는 가 특수 문자이기 때문입니다. 자체를 출력하고 싶을 뿐입니다. 🎜🎜
b f v🎜백스페이스, 페이지 피드, 세로 탭 - 더 이상 사용되지 않습니다. 🎜🎜
xXX🎜 XX로 인코딩된 16진수. 문자, 예: x7A는 z를 의미합니다(z 코드>의 16진수 유니코드는 7A) 🎜🎜
uXXXX🎜 는 16진수XXXX code>유니코드 문자로 인코딩됩니다. 예: u00A9는 © 🎜🎜
u{X...X}(1 -6 16진수 문자)를 의미합니다. ) 🎜 UTF-32는 X...X 기호의 유니코드로 인코딩됩니다.

举个例子：

console.log('I\'m a student.');// \'console.log("\"I love U\"");// \"console.log("\\n is new line character.");// \nconsole.log('\u00A9')// ©console.log('\u{1F60D}');//

代码执行结果：

"JavaScript

有了转义符\的存在，理论上我们可以输出任何字符，只要找到它对应的编码就可以了。

避免使用\'、\"

对于字符串中的单双引号，我们可以通过在单引号中使用双引号、在双引号中使用单引号，或者直接在反引号中使用单双引号，就可以巧妙的避免使用转义符，例如：

console.log("I'm a student.");
//双引号中使用单引号console.log('"" is used.');
//单引号中使用双引号console.log(`' " is used.`);
//反引号中使用单双引号

代码执行结果如下：

"JavaScript

.length

通过字符串的.length属性，我们可以获得字符串的长度：

console.log("HelloWorld\n".length);//11

这里\n只占用了一个字符。

《基础类型的方法》章节我们探究了JavaScript中的基础类型为什么会有属性和方法，你还记得吗？

访问字符、charAt()、for…of

字符串是字符组成的串，我们可以通过[字符下标]访问单个的字符，字符下标从0开始：

let str = "The author is handsome.";
console.log(str[0]);//Tconsole.log(str[4]);//aconsole.log(str[str.length-1]);//.

代码执行结果：

"JavaScript

我们还可以使用charAt(post)函数获得字符：

let str = "The author is handsome.";console.log(str.charAt(0));
//Tconsole.log(str.charAt(4));
//aconsole.log(str.charAt(str.length-1));//.

二者执行效果完全相同，唯一的区别在于越界访问字符时：

let str = "01234";console.log(str[9]);//undefinedconsole.log(str.charAt(9));//""（空串）

我们还可以使用for ..of遍历字符串：

for(let c of '01234'){
    console.log(c);}

字符串不可变

JavaScript中的字符串一经定义就不可更改，举个例子：

let str = "Const";str[0] = 'c' ;console.log(str);

代码执行结果：

"JavaScript

如果想获得一个不一样的字符串，只能新建：

let str = "Const";str = str.replace('C','c');console.log(str);

看起来我们似乎改变了字符串，实际上原来的字符串并没有被改变，我们得到的是replace方法返回的新字符串。

.toLowerCase()、.toUpperCase()

转换字符串大小写，或者转换字符串中单个字符的大小写。

这两个字符串的方法比较简单，举例带过：

console.log('Good Boy'.toLowerCase());//good 
boyconsole.log('Good Boy'.toUpperCase());//GOOD 
BOYconsole.log('Good Boy'[5].toLowerCase());//b

代码执行结果：

"JavaScript

.indexOf()、.lastIndexOf() 查找子串

.indexOf(substr,idx)函数从字符串的idx位置开始，查找子串substr的位置，成功返回子串首字符下标，失败返回-1。

let str = "google google";console.log(str.indexOf('google'));
//0 idx默认为0console.log(str.indexOf('google',1));
//7 从第二个字符开始查找console.log(str.indexOf('xxx'));
//-1 没找到返回-1

代码执行结果：

"JavaScript

如果我们想查询字符串中所有子串位置，可以使用循环：

let str = "I love love love love u.";let sub = "love";let pos = -1;while((pos = str.indexOf(sub,pos+1)) != -1)
    console.log(pos);

代码执行结果如下：

"JavaScript

.lastIndexOf(substr,idx)倒着查询子串，首先查找最后一个符合的串：

let str = "google google";console.log(str.lastIndexOf('google'));//7 idx默认为0

按位取反技巧（不推荐，但要会）

由于indexOf()和lastIndexOf()方法在查询不成功的时候会返回-1，而~-1 === 0。也就是说只有在查询结果不为-1的情况下使用~才为真，所以我们可以：

let str = "google google";if(~indexOf('google',str)){
    ...}

通常情况下，我们不推荐在不能明显体现语法特性的地方使用一个语法，这会在可读性上产生影响。好在以上代码只出现在旧版本的代码中，这里提到就是为了大家在阅读旧代码的时候不会产生困惑。

补充：

~是按位取反运算符，例如：十进制的数字2的二进制形式为0010，~2的二进制形式就是1101（补码），也就是-3。

简单的理解方式，~n等价于-(n+1)，例如：~2 === -(2+1) === -3

.includes()、.startsWith()、.endsWith()

  1. .includes(substr,idx)用于判断substr是否在字符串中，idx是查询开始的位置

    console.log('Google Google'.includes('Google'));//trueconsole.log('Google Google'.includes('xxxxxx'));//falseconsole.log('9966'.includes('99',1));//false

    代码执行结果：

    "JavaScript

  2. .startsWith('substr')和.endsWith('substr')分别判断字符串是否以substr开始或结束

    console.log("google".startsWith('go'));//trueconsole.log('google'.endsWith('le'));//trueconsole.log('google'.endsWith('ie'));//false

    代码执行结果：

    "JavaScript

.JavaScript 문자열의 일반적인 기본 방법에 대한 자세한 소개、.JavaScript 문자열의 일반적인 기본 방법에 대한 자세한 소개、.JavaScript 문자열의 일반적인 기본 방법에 대한 자세한 소개

.JavaScript 문자열의 일반적인 기본 방법에 대한 자세한 소개、.JavaScript 문자열의 일반적인 기본 방법에 대한 자세한 소개、.JavaScript 문자열의 일반적인 기본 방법에 대한 자세한 소개均用于取字符串的子串，不过用法各有不同。

  1. .substr(start,len)

    返回字符串从start开始len个字符组成的字符串，如果省略len，就截取到原字符串的末尾。start可以为负数，表示从后往前第start个字符。

    let str = "0123456789";console.log(str.substr(1))//123456789，从1开始到最后console.log(str.substr(3,2))//34，从3开始的2个字符console.log(str.substr(-3,2))//78，倒数第二个开始

    代码执行结果：

    "JavaScript

  2. .slice(start,end)

    返回字符串从start开始到end结束（不包括）的字符串。start和end可以为负数，表示倒数第start/end个字符。

    let str = '0123456789';console.log(str.slice(1,5));//1234，区间[1,5)之间的字符console.log(str.slice(1));//123456789，从1到结尾console.log(str.slice(-4,-1));//678，倒数第四个到倒数第1个

    代码执行结果：

    "JavaScript

  3. .substring(start,end)

    作用几乎和.JavaScript 문자열의 일반적인 기본 방법에 대한 자세한 소개相同，差别在两个地方：

    • 允许end > start;
    • 不允许负数，负数视为0;

    举例：

    let str = '0123456789';console.log(str.substring(1,3));//12console.log(str.substring(3,1));//12console.log(str.substring(-1,3));//012，-1被当作0

    代码执行结果：

    "JavaScript

对比三者的区别：

方法 描述 参数
.slice(start,end) [start,end) 可负
.substring(start,end) [start,end) 负值为0
.substr(start,len) 从start开始长为len的子串 可负

方法多了自然就选择困难了，这里建议记住.JavaScript 문자열의 일반적인 기본 방법에 대한 자세한 소개就可以了，相比于其他两种更灵活。

.JavaScript 문자열의 일반적인 기본 방법에 대한 자세한 소개、JavaScript 문자열의 일반적인 기본 방법에 대한 자세한 소개

我们在前文中已经提及过字符串的比较，字符串按照字典序进行排序，每个字符背后都是一个编码，ASCII编码就是一个重要的参考。

例如:

console.log('a'>'Z');//true

字符之间的比较，本质上是代表字符的编码之间的比较。JavaScript使用UTF-16编码字符串，每个字符都是一个16为的代码，想要知道比较的本质，就需要使用.codePointAt(idx)获得字符的编码：

console.log('a'.codePointAt(0));//97console.log('Z'.codePointAt(0));//90

代码执行结果：

"JavaScript

使用String.fromCodePoint(code)可以把编码转为字符：

console.log(String.fromCodePoint(97));console.log(String.fromCodePoint(90));

代码执行结果如下：

"JavaScript

这个过程可以用转义符\u实现，如下：

console.log('\u005a');//Z，005a是90的16进制写法console.log('\u0061');//a，0061是97的16进制写法

下面我们探索一下编码为[65,220]区间的字符：

let str = '';for(let i = 65; i<p>代码执行部分结果如下：</p><p><img src="https://img.php.cn/upload/article/000/000/067/0f4e2a78ef52090d845bd32f6b72d01c-17.png" alt="JavaScript 문자열의 일반적인 기본 방법에 대한 자세한 소개"></p><p>上图并没有展示所有的结果，快去试试吧。</p><h2>.localeCompare()</h2><p>基于国际化标准<code>ECMA-402</code>，<code>JavaScript</code>已经实现了一个特殊的方法（<code>.localeCompare()</code>）比较各种字符串，采用<code>str1.localeCompare(str2)</code>的方式：</p><ol>
<li>如果<code>str1 ，返回负数；</code>
</li>
<li>如果<code>str1 > str2</code>，返回正数；</li>
<li>如果<code>str1 == str2</code>,返回0；</li>
</ol><p>举个例子：</p><pre class="brush:php;toolbar:false">console.log("abc".localeCompare('def'));//-1

为什么不直接使用比较运算符呢？

这是因为英文字符有一些特殊的写法，例如，á是a的变体：

console.log('á' <p>虽然也是<code>a</code>，但是比<code>z</code>还要大！！</p><p>此时就需要使用<code>.localeCompare()</code>方法：</p><pre class="brush:php;toolbar:false">console.log('á'.localeCompare('z'));//-1

常用方法

  1. str.trim()去除字符串前后空白字符，str.trimStart()、str.trimEnd()删除开头、结尾的空格；

    let str = "  999   ";console.log(str.trim());//999

  2. str.repeat(n)重复n次字符串；

    let str = '6';console.log(str.repeat(3));//666

  3. str.replace(substr,newstr)替换第一个子串，str.replaceAll()用于替换所有子串；

    let str = '9+9';console.log(str.replace('9','6'));//6+9console.log(str.replaceAll('9','6'));//6+6

还有很多其他方法，我们可以访问手册获取更多知识。

进阶内容

生僻字、JavaScript 문자열의 일반적인 기본 방법에 대한 자세한 소개、特殊符号

JavaScript使用UTF-16编码字符串，也就是使用两个字节（16位）表示一个字符，但是16位数据只能表示65536个字符，对于常见字符自然不在话下，但是对于生僻字（中文的）、JavaScript 문자열의 일반적인 기본 방법에 대한 자세한 소개、罕见数学符号等就力不从心了。

这种时候就需要扩展，使用更长的位数（32位）表示特殊字符，例如：

console.log(''.length);//2console.log('?'.length);//2

代码执行结果：

"JavaScript

这么做的结果是，我们无法使用常规的方法处理它们，如果我们单个输出其中的每个字节，会发生什么呢？

console.log(''[0]);console.log(''[1]);

代码执行结果：

"JavaScript

可以看到，单个输出字节是不能识别的。

好在JavaScript 문자열의 일반적인 기본 방법에 대한 자세한 소개和.JavaScript 문자열의 일반적인 기본 방법에 대한 자세한 소개两个方法是可以处理这种情况的，这是因为二者是最近才加入的。在旧版本的JavaScript中，只能使用String.fromCharCode()和.charCodeAt()两个方法转换编码和字符，但是他们不适用于特殊字符的情况。

我们可以通过判断一个字符的编码范围，判断它是否是一个特殊字符，从而处理特殊字符。如果一个字符的代码在0xd800~0xdbff之间，那么他是32位字符的第一部分，它的第二部分应该在0xdc00~0xdfff。

举个例子：

console.log(''.charCodeAt(0).toString(16));//d83
dconsole.log('?'.charCodeAt(1).toString(16));//de02

代码执行结果：

"JavaScript

规范化

在英文中，存在很多基于字母的变体，例如：字母 a 可以是 àáâäãåā 的基本字符。这些变体符号并没有全部存储在UTF-16编码中，因为变化组合太多了。

为了支持所有的变体组合，同样使用多个Unicode字符表示单个变体字符，在编程过程中，我们可以使用基本字符加上“装饰符号”的方式表达特殊字符：

console.log('a\u0307');//ȧ
console.log('a\u0308');//ȧ
console.log('a\u0309');//ȧ
console.log('E\u0307');//Ė
console.log('E\u0308');//Ë
console.log('E\u0309');//Ẻ

代码执行结果：

"JavaScript

一个基础字母还可以有多个装饰，例如：

console.log('E\u0307\u0323');//Ẹ̇
console.log('E\u0323\u0307');//Ẹ̇

代码执行结果：

"JavaScript

这里存在一个问题，在多个装饰的情况下，装饰的排序不同，实际上展示的字符是一样的。

如果我们直接比较这两种表示形式，却会得到错误的结果：

let e1 = 'E\u0307\u0323';
let e2 = 'E\u0323\u0307';
console.log(`${e1}==${e2} is ${e1 == e2}`)

代码执行结果：

"JavaScript

为了解决这种情况，有一个**Unicode规范化算法，可以将字符串转为通用**格式，由str.normalize()实现：

<span   style="max-width:90%" microsoft yahei sans gb helvetica neue tahoma arial sans-serif>let e1 = 'E\u0307\u0323';<br>let e2 = 'E\u0323\u0307';<br>console.log(`${e1}==${e2} is ${e1.normalize() == e2.normalize()}`)</span><br>

代码执行结果：

"JavaScript

【相关推荐：javascript视频教程、web前端】

위 내용은 JavaScript 문자열의 일반적인 기본 방법에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Java JavaScript 数据类型 String 运算符 比较运算符 for 字符串 循环 Length len ASCII windows 算法
성명：
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：각도 학습 상태 관리자 NgRx에 대한 자세한 설명다음 기사：각도 학습 상태 관리자 NgRx에 대한 자세한 설명

관련 기사

더보기