diff --git a/.changeset/witty-owls-burn.md b/.changeset/witty-owls-burn.md
new file mode 100644
index 00000000000..be169d98a74
--- /dev/null
+++ b/.changeset/witty-owls-burn.md
@@ -0,0 +1,7 @@
+---
+'@graphiql/react': patch
+'@graphiql/toolkit': patch
+'graphql-language-service': patch
+---
+
+Prefer String#slice() over String#substr() and String#substring()
diff --git a/.eslintrc.js b/.eslintrc.js
index af244c36e3e..d5f1b080ef8 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -112,6 +112,7 @@ module.exports = {
     'require-await': 0,
     'vars-on-top': 0,
     yoda: 1,
+    'unicorn/prefer-string-slice': 'error',
     'sonarjs/no-identical-functions': 'error',
     'sonarjs/no-unused-collection': 'error',
     'sonarjs/no-extra-arguments': 'error',
diff --git a/packages/graphiql-react/src/editor/tabs.ts b/packages/graphiql-react/src/editor/tabs.ts
index 090df7660e0..7622cb0cfc1 100644
--- a/packages/graphiql-react/src/editor/tabs.ts
+++ b/packages/graphiql-react/src/editor/tabs.ts
@@ -322,7 +322,7 @@ function guid(): string {
   const s4 = () => {
     return Math.floor((1 + Math.random()) * 0x10000)
       .toString(16)
-      .substring(1);
+      .slice(1);
   };
   // return id of format 'aaaaaaaa'-'aaaa'-'aaaa'-'aaaa'-'aaaaaaaaaaaa'
   return `${s4()}${s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
diff --git a/packages/graphiql-toolkit/src/graphql-helpers/auto-complete.ts b/packages/graphiql-toolkit/src/graphql-helpers/auto-complete.ts
index cf8127c963e..ef52e53b246 100644
--- a/packages/graphiql-toolkit/src/graphql-helpers/auto-complete.ts
+++ b/packages/graphiql-toolkit/src/graphql-helpers/auto-complete.ts
@@ -199,7 +199,7 @@ function getIndentation(str: string, index: number) {
       indentEnd = indentStart;
     }
   }
-  return str.substring(indentStart, indentEnd);
+  return str.slice(indentStart, indentEnd);
 }
 
 function isFieldType(
diff --git a/packages/graphiql/resources/renderExample.js b/packages/graphiql/resources/renderExample.js
index 75db4573706..8c989ceb056 100644
--- a/packages/graphiql/resources/renderExample.js
+++ b/packages/graphiql/resources/renderExample.js
@@ -15,7 +15,7 @@
 // Parse the search string to get url parameters.
 var parameters = {};
 window.location.search
-  .substr(1)
+  .slice(1)
   .split('&')
   .forEach(function (entry) {
     var eq = entry.indexOf('=');
diff --git a/packages/graphql-language-service/src/parser/CharacterStream.ts b/packages/graphql-language-service/src/parser/CharacterStream.ts
index 8d637c89b81..6675472132a 100644
--- a/packages/graphql-language-service/src/parser/CharacterStream.ts
+++ b/packages/graphql-language-service/src/parser/CharacterStream.ts
@@ -111,7 +111,9 @@ export default class CharacterStream implements CharacterStreamInterface {
 
     if (typeof pattern === 'string') {
       const regex = new RegExp(pattern, caseFold ? 'i' : 'g');
-      match = regex.test(this._sourceText.substr(this._pos, pattern.length));
+      match = regex.test(
+        this._sourceText.slice(this._pos, this._pos + pattern.length),
+      );
       token = pattern;
     } else if (pattern instanceof RegExp) {
       match = this._sourceText.slice(this._pos).match(pattern);