diff --git a/web-console/script/mkcomp b/web-console/script/mkcomp
index 418224fc842..dc6724f6b58 100755
--- a/web-console/script/mkcomp
+++ b/web-console/script/mkcomp
@@ -44,7 +44,7 @@ fs.ensureDirSync(path);
 console.log('Making path:', path);
 
 const camelName = name.replace(/(^|-)[a-z]/g, s => s.replace('-', '').toUpperCase());
-const snakeName = camelName[0].toLowerCase() + camelName.substr(1);
+const snakeName = camelName[0].toLowerCase() + camelName.slice(1);
 
 function writeFile(path, data) {
   try {
diff --git a/web-console/src/components/table-cell/table-cell.tsx b/web-console/src/components/table-cell/table-cell.tsx
index 9e390774ee8..4e78b4f7fa7 100644
--- a/web-console/src/components/table-cell/table-cell.tsx
+++ b/web-console/src/components/table-cell/table-cell.tsx
@@ -39,8 +39,8 @@ function shortenString(str: string): ShortParts {
   // Print something like:
   // BAAAArAAEiQKpDAEAACwZCBAGSBgiSEAAAAQpAIDwAg...23 omitted...gwiRoQBJIC
   const omit = str.length - (MAX_CHARS_TO_SHOW - 17);
-  const prefix = str.substr(0, str.length - (omit + 10));
-  const suffix = str.substr(str.length - 10);
+  const prefix = str.slice(0, str.length - (omit + 10));
+  const suffix = str.slice(str.length - 10);
   return {
     prefix,
     omitted: `...${omit} omitted...`,
@@ -73,7 +73,7 @@ export const TableCell = React.memo(function TableCell(props: TableCellProps) {
         <div className="table-cell plain">
           {str.length < ABSOLUTE_MAX_CHARS_TO_SHOW
             ? str
-            : `${str.substr(0, ABSOLUTE_MAX_CHARS_TO_SHOW)}...`}
+            : `${str.slice(0, ABSOLUTE_MAX_CHARS_TO_SHOW)}...`}
         </div>
       );
     }
diff --git a/web-console/src/druid-models/workbench-query/workbench-query.ts b/web-console/src/druid-models/workbench-query/workbench-query.ts
index 63e0aa0314d..1a3d1e98ec3 100644
--- a/web-console/src/druid-models/workbench-query/workbench-query.ts
+++ b/web-console/src/druid-models/workbench-query/workbench-query.ts
@@ -195,7 +195,7 @@ export class WorkbenchQuery {
       .map(line =>
         line.replace(
           /^(\s*)(INSERT\s+INTO|REPLACE\s+INTO|OVERWRITE|PARTITIONED\s+BY|CLUSTERED\s+BY)/i,
-          (_, spaces, thing) => `${spaces}--${thing.substr(2)}`,
+          (_, spaces, thing) => `${spaces}--${thing.slice(2)}`,
         ),
       )
       .join('\n');
diff --git a/web-console/src/utils/date.ts b/web-console/src/utils/date.ts
index 3b4ec6fc7e6..c0f6a59c4e7 100644
--- a/web-console/src/utils/date.ts
+++ b/web-console/src/utils/date.ts
@@ -21,7 +21,7 @@ import type { DateRange } from '@blueprintjs/datetime';
 const CURRENT_YEAR = new Date().getUTCFullYear();
 
 export function dateToIsoDateString(date: Date): string {
-  return date.toISOString().substr(0, 10);
+  return date.toISOString().slice(0, 10);
 }
 
 export function utcToLocalDate(utcDate: Date): Date {
@@ -52,8 +52,8 @@ export function localDateRangeToInterval(localRange: DateRange): string {
   // This function takes in the dates selected from datepicker in local time, and displays them in UTC
   // Shall Blueprint make any changes to the way dates are selected, this function will have to be reworked
   const [localStartDate, localEndDate] = localRange;
-  return `${localStartDate ? localToUtcDate(localStartDate).toISOString().substring(0, 19) : ''}/${
-    localEndDate ? localToUtcDate(localEndDate).toISOString().substring(0, 19) : ''
+  return `${localStartDate ? localToUtcDate(localStartDate).toISOString().slice(0, 19) : ''}/${
+    localEndDate ? localToUtcDate(localEndDate).toISOString().slice(0, 19) : ''
   }`;
 }
 
diff --git a/web-console/src/utils/druid-expression.ts b/web-console/src/utils/druid-expression.ts
index af2cb345276..377b7b33ead 100644
--- a/web-console/src/utils/druid-expression.ts
+++ b/web-console/src/utils/druid-expression.ts
@@ -20,7 +20,7 @@ const UNSAFE_CHAR = /[^a-z0-9 ,._\-;:(){}[\]<>!@#$%^&*`~?]/gi;
 
 function escape(str: string): string {
   return str.replace(UNSAFE_CHAR, s => {
-    return '\\u' + ('000' + s.charCodeAt(0).toString(16)).substr(-4);
+    return '\\u' + ('000' + s.charCodeAt(0).toString(16)).slice(-4);
   });
 }
 
diff --git a/web-console/src/utils/formatter.ts b/web-console/src/utils/formatter.ts
index 14e0276ccf6..1b3bc38eb9f 100644
--- a/web-console/src/utils/formatter.ts
+++ b/web-console/src/utils/formatter.ts
@@ -32,13 +32,15 @@ const JSON_ESCAPES: Record<string, string> = {
   't': '\t',
 };
 
-// The stringifier is just JSON minus the double quotes, the parser is much more forgiving
+/**
+ * The stringifier is just JSON minus the double quotes, the parser is much more forgiving.
+ */
 export const JSON_STRING_FORMATTER: Formatter<string> = {
   stringify: (str: string) => {
     if (typeof str !== 'string') return '';
 
     const json = JSON.stringify(str);
-    return json.substr(1, json.length - 2);
+    return json.slice(1, json.length - 1);
   },
   parse: (str: string) => {
     const n = str.length;
@@ -48,8 +50,8 @@ export const JSON_STRING_FORMATTER: Formatter<string> = {
       const ch = str[i];
       if (ch === '\\') {
         const nextCh = str[i + 1];
-        if (nextCh === 'u' && /^[0-9a-f]{4}$/i.test(str.substr(i + 2, 4))) {
-          parsed += String.fromCharCode(parseInt(str.substr(i + 2, 4), 16));
+        if (nextCh === 'u' && /^[0-9a-f]{4}$/i.test(str.slice(i + 2, i + 6))) {
+          parsed += String.fromCharCode(parseInt(str.slice(i + 2, i + 6), 16));
           i += 6;
         } else if (JSON_ESCAPES[nextCh]) {
           parsed += JSON_ESCAPES[nextCh];
diff --git a/web-console/src/utils/general.tsx b/web-console/src/utils/general.tsx
index 65d912b6348..9140452947c 100644
--- a/web-console/src/utils/general.tsx
+++ b/web-console/src/utils/general.tsx
@@ -218,11 +218,11 @@ export function formatMillions(n: NumberLike): string {
 }
 
 function pad2(str: string | number): string {
-  return ('00' + str).substr(-2);
+  return ('00' + str).slice(-2);
 }
 
 function pad3(str: string | number): string {
-  return ('000' + str).substr(-3);
+  return ('000' + str).slice(-3);
 }
 
 export function formatDuration(ms: NumberLike): string {
@@ -252,7 +252,7 @@ export function formatDurationHybrid(ms: NumberLike): string {
     const timeInMs = Math.floor(n) % 1000;
     return `${timeInMin ? `${timeInMin}:` : ''}${timeInMin ? pad2(timeInSec) : timeInSec}.${pad3(
       timeInMs,
-    ).substring(0, 2)}s`;
+    ).slice(0, 2)}s`;
   } else {
     return formatDuration(n);
   }
@@ -413,7 +413,7 @@ export function parseCsvLine(line: string): string[] {
   let m: RegExpExecArray | null;
   while ((m = /^,(?:"([^"]*(?:""[^"]*)*)"|([^,\r\n]*))/m.exec(line))) {
     parts.push(typeof m[1] === 'string' ? m[1].replace(/""/g, '"') : m[2]);
-    line = line.substr(m[0].length);
+    line = line.slice(m[0].length);
   }
   return parts;
 }
@@ -456,5 +456,5 @@ export function tickIcon(checked: boolean): IconName {
 }
 
 export function generate8HexId(): string {
-  return (Math.random() * 1e10).toString(16).replace('.', '').substr(0, 8);
+  return (Math.random() * 1e10).toString(16).replace('.', '').slice(0, 8);
 }
diff --git a/web-console/src/utils/query-cursor.ts b/web-console/src/utils/query-cursor.ts
index 909b0dea50c..f445406c031 100644
--- a/web-console/src/utils/query-cursor.ts
+++ b/web-console/src/utils/query-cursor.ts
@@ -50,7 +50,7 @@ export function findEmptyLiteralPosition(query: SqlQuery): RowColumn | undefined
   const crazyIndex = subQueryString.indexOf(CRAZY_STRING);
   if (crazyIndex < 0) return;
 
-  const prefix = subQueryString.substr(0, crazyIndex);
+  const prefix = subQueryString.slice(0, crazyIndex);
   const lines = prefix.split(/\n/g);
   const row = lines.length - 1;
   const lastLine = lines[row];
diff --git a/web-console/src/views/load-data-view/load-data-view.tsx b/web-console/src/views/load-data-view/load-data-view.tsx
index d3d4a109a43..5c08442b689 100644
--- a/web-console/src/views/load-data-view/load-data-view.tsx
+++ b/web-console/src/views/load-data-view/load-data-view.tsx
@@ -207,7 +207,7 @@ function showRawLine(line: SampleEntry): string {
     return `[Multi-line row, length: ${raw.length}]`;
   }
   if (raw.length > 1000) {
-    return raw.substr(0, 1000) + '...';
+    return raw.slice(0, 1000) + '...';
   }
   return raw;
 }
@@ -1220,7 +1220,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           placeholder="Paste your data here"
           value={deepGet(spec, 'spec.ioConfig.inputSource.data')}
           onChange={(e: any) => {
-            const stringValue = e.target.value.substr(0, MAX_INLINE_DATA_LENGTH);
+            const stringValue = e.target.value.slice(0, MAX_INLINE_DATA_LENGTH);
             this.updateSpecPreview(deepSet(spec, 'spec.ioConfig.inputSource.data', stringValue));
           }}
         />