入门JavaScript: 字符串方法归类

写的JS文章,求点评(管理员不必担心,只发这一篇,查漏补缺个人的思维死角

为什么string 字符串在各种语言中会有如此之多的 methods 呢?只须简单想一下,我们日用的编辑的全部功能其实只不过就是在处理和操作字符串。

一、编辑器文本操作逻辑

开始盘点 string 的所有 methods 之前,我们首先梳理在编辑器中,处理文本文字,都有哪些操作。

第一类,选择复制与黏贴; 第二类,具体的编辑操作,写入文本,查询修改,以及删除; 第三类,撤销与重复操作; 第四类,补全操作,语法检查以及断行等。

下面,我们将按照以上编辑器文本处理的类型,对所有string的方法作分类。

二、String 字符串操作的分类

事实上,我们每日所处理的文本内容,文件的内容就是 string。

第一类、选择与复制(2种方法)

首先编辑器处理文本内容的第一类,黏贴与复制,就是光标选中文本的特定区域,执行复制与黏贴操作。对应到 string 操作中,就是 substring, slice.

> let s = "string categories"
> s.substring(7, 16)
'categorie'
> s.substring(16, 7)
'categorie'
// slice 与 substring 的区别只在于,substring 会自动调整大小数的顺序
> s.slice(7, 16)
'categorie'
> s.slice(16, 7)
''
// 特殊的 split 方法
> s.split(" ")
[ 'string', 'categories' ]
>

第二类,具体的编辑操作

在数据库操作中,我们往往喜欢说“增删改查“这样的四种操作和操作顺序。乍一读似乎朗朗上口,然而细品起来,"增删改查"的顺序比较荒谬。怎么刚刚“增”了就马上又要“删”呢?删除的依据是什么?不要首先查询吗?查询后不要尝试修改吗?直至修改不好,最后一步才是“删除”。

因此,将“增删改查”的顺序,变更为“增查改删”。

所谓的 “增“ 就是”字符串“的创建,有三种方式:

s = 'string categories' // single quote
s = "string categories" // double quote 
s = `string categories` // caret `

其次是 “查”, 无论在编辑器中,还是字符串的处理过程中,查询都是关键的部分。编辑器查询往往多为regex的应用,这对于 string 操作而言过于重型,常用的多为逻辑查询5种。

> s.charAt(0)
's'
> s.charAt(s.length-1)
's'
> s.startsWith('str')
true
> s.endsWith('es')
true
> s.includes('c')
true
> s.indexOf('c')
7
> s.lastIndexOf('c')
7s

高阶的regex正则查询:

> s.search(/[\s]/g);
6
> s.search(/[\w]/g);
0
> s.match(/[\s]/i)
[ ' ', index: 6, input: 'string categories', groups: undefined ]
> s.match(/[\w]/i)
[ 's', index: 0, input: 'string categories', groups: undefined ]
> s.match(/[\w]/g)
[
  's', 't', 'r', 'i',
  'n', 'g', 'c', 'a',
  't', 'e', 'g', 'o',
  'r', 'i', 'e', 's'
]
> arr = [...s.matchAll(/[\w]/g)]
[
  [ 's', index: 0, input: 'string categories', groups: undefined ],
  ...
  [ 'i', index: 14, input: 'string categories', groups: undefined ],
  [ 'e', index: 15, input: 'string categories', groups: undefined ],
  [ 's', index: 16, input: 'string categories', groups: undefined ]
]

紧随 “查询” 的是 “变更”与“修改” , 继续regex的逻辑,我们查看 replace.

> s.replace('string', 'arry')
'arry categories'
> s.replace(/[a-z]+/, "array")
'array categories'
> s.replaceAll()

其他常用的 case, transpose, join, 以及 whitespace 的操作:

// CaseManipulation
> s.toLowerCase()
'string categories'
> s.toUpperCase()
'STRING CATEGORIES'
s.toLocaleLowerCase
s.toLocaleUpperCase

// 对 whitespace 的处理
s.trim
s.trimStart
s.trimEnd

// 增加空格等
s.padStart
s.padEnd

//以及多行的合并
> s.concat(' new')
'string categories new'

第三类 撤销与重复 操作:

没有撤销操作而只有重复.

> s.repeat(3)
'string categoriesstring categoriesstring categories'

第四类 补全,语法检查和断行

此处我们姑且将 pad 作为补全, 而将 split 想象为断行.

三 对底层编码的处理

String 字符串就是文字与编码, 因此最底层的对应编码的操作也归类此处处理.

> s.charCodeAt(0)
115
> s.codePointAt(0)
115
> s.normalize()
'string categories'

四 总结

诸上为从编辑器的惯常操作,而对string所有的methods作归类的盘点。

// 1.选择与复制 3
substring, slice, split

// 2.具体的编辑操作, 按照“增查改删”的原则
// 2.1 增加 1
constructor
// 2.2 查询 8
charAt, 
startsWith, endsWith, 
includes, indexof, lastIndexOf,
search, searchAll
// 2.3 改 10
replace, replaceAll, 
toLowerCase, toUpperCase, //Case
trim, trimStart, trimEnd, // whitespae
padStart, padEnd // completion
concat //合并 join

// 3. 重复与撤销等 1
repeat

// 4.处理底层编码 3
charCodeAt,codePointAt,normalize

快作一篇 emacs lisp builtin 字符串方法

2 个赞

我记得js实现字符串中英文标点符号互相替换好像有点麻烦,似乎不能把标点符号直接写在数组变量里循环用replace()来替换,要用eval()不被建议使用或者把unicode编码里的\u4e00这些写出来才能实现,好久前我折腾到这就没有继续了 :joy: ,改成了用php来实现中英文标点符号替换, 使用 strtr($str,array("!"=>"!","¥"=>"$","("=>"("))

看到有人折腾,就顺便问一下(可能不一定对)

这个网站很不错,适合大部分读者。

我写这篇文章把MDN的手册通读了一遍。

做个mindmap吧 :slightly_smiling_face: