diff --git a/packages/grafana-data/src/datetime/timezones.ts b/packages/grafana-data/src/datetime/timezones.ts
index b1528a66aaa..efd198474da 100644
--- a/packages/grafana-data/src/datetime/timezones.ts
+++ b/packages/grafana-data/src/datetime/timezones.ts
@@ -84,7 +84,7 @@ export const getTimeZoneGroups = memoize(
         return groups;
       }
 
-      const group = zone.substr(0, delimiter);
+      const group = zone.slice(0, delimiter);
       groups[group] = groups[group] ?? [];
       groups[group].push(zone);
 
diff --git a/packages/grafana-data/src/text/string.ts b/packages/grafana-data/src/text/string.ts
index 12f628c7cb0..4031ea6fdb1 100644
--- a/packages/grafana-data/src/text/string.ts
+++ b/packages/grafana-data/src/text/string.ts
@@ -49,7 +49,7 @@ export function stringToMs(str: string): number {
   }
 
   const nr = parseInt(str, 10);
-  const unit = str.substr(String(nr).length);
+  const unit = str.slice(String(nr).length);
   const s = 1000;
   const m = s * 60;
   const h = m * 60;
diff --git a/packages/grafana-data/src/themes/colorManipulator.ts b/packages/grafana-data/src/themes/colorManipulator.ts
index 1626d573e17..b74c745e075 100644
--- a/packages/grafana-data/src/themes/colorManipulator.ts
+++ b/packages/grafana-data/src/themes/colorManipulator.ts
@@ -29,7 +29,7 @@ function clamp(value: number, min = 0, max = 1) {
  * @beta
  */
 export function hexToRgb(color: string) {
-  color = color.substr(1);
+  color = color.slice(1);
 
   const re = new RegExp(`.{1,${color.length >= 6 ? 2 : 1}}`, 'g');
   let colors = color.match(re);
@@ -141,7 +141,7 @@ export function decomposeColor(color: string | DecomposeColor): DecomposeColor {
     values = values.split(' ');
     colorSpace = values.shift();
     if (values.length === 4 && values[3].charAt(0) === '/') {
-      values[3] = values[3].substr(1);
+      values[3] = values[3].slice(1);
     }
     if (['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].indexOf(colorSpace) === -1) {
       throw new Error(
diff --git a/packages/grafana-data/src/utils/csv.ts b/packages/grafana-data/src/utils/csv.ts
index a9a7e7dfd45..11dc0be344a 100644
--- a/packages/grafana-data/src/utils/csv.ts
+++ b/packages/grafana-data/src/utils/csv.ts
@@ -87,7 +87,7 @@ export class CSVReader {
           // #{columkey}#a,b,c
           const idx = first.indexOf('#', 2);
           if (idx > 0) {
-            const k = first.substr(1, idx - 1);
+            const k = first.slice(1, idx);
             const isName = 'name' === k;
 
             // Simple object used to check if headers match
@@ -103,7 +103,7 @@ export class CSVReader {
                 this.data.push(this.current);
               }
 
-              const v = first.substr(idx + 1);
+              const v = first.slice(idx + 1);
               if (isName) {
                 this.current.addFieldFor(undefined, v);
                 for (let j = 1; j < line.length; j++) {
diff --git a/packages/grafana-data/src/valueFormats/valueFormats.ts b/packages/grafana-data/src/valueFormats/valueFormats.ts
index a23253b0c2c..76a38232cdf 100644
--- a/packages/grafana-data/src/valueFormats/valueFormats.ts
+++ b/packages/grafana-data/src/valueFormats/valueFormats.ts
@@ -66,7 +66,7 @@ export function toFixed(value: number, decimals?: DecimalCount): string {
   const decimalPos = formatted.indexOf('.');
   const precision = decimalPos === -1 ? 0 : formatted.length - decimalPos - 1;
   if (precision < decimals) {
-    return (precision ? formatted : formatted + '.') + String(factor).substr(1, decimals - precision);
+    return (precision ? formatted : formatted + '.') + String(factor).slice(1, decimals - precision + 1);
   }
 
   return formatted;
diff --git a/packages/grafana-runtime/src/components/DataSourcePicker.tsx b/packages/grafana-runtime/src/components/DataSourcePicker.tsx
index 3e1bff0ad29..adf02a92f9c 100644
--- a/packages/grafana-runtime/src/components/DataSourcePicker.tsx
+++ b/packages/grafana-runtime/src/components/DataSourcePicker.tsx
@@ -105,7 +105,7 @@ export class DataSourcePicker extends PureComponent<DataSourcePickerProps, DataS
 
     if (ds) {
       return {
-        label: ds.name.substr(0, 37),
+        label: ds.name.slice(0, 37),
         value: ds.uid,
         imgUrl: ds.meta.info.logos.small,
         hideText: hideTextValue,
diff --git a/packages/grafana-toolkit/docker/grafana-plugin-ci-alpine/install/bin/githubRelease.js b/packages/grafana-toolkit/docker/grafana-plugin-ci-alpine/install/bin/githubRelease.js
index c6f42f71c4c..54062c15767 100644
--- a/packages/grafana-toolkit/docker/grafana-plugin-ci-alpine/install/bin/githubRelease.js
+++ b/packages/grafana-toolkit/docker/grafana-plugin-ci-alpine/install/bin/githubRelease.js
@@ -11,7 +11,7 @@ var fs = require('fs');
 var githubClient_1 = tslib_1.__importDefault(require('./githubClient'));
 var resolveContentType = function (extension) {
   if (extension.startsWith('.')) {
-    extension = extension.substr(1);
+    extension = extension.slice(1);
   }
   switch (extension) {
     case 'zip':
diff --git a/packages/grafana-toolkit/src/cli/utils/githubRelease.ts b/packages/grafana-toolkit/src/cli/utils/githubRelease.ts
index a63a5609b52..2dbd1b6126e 100644
--- a/packages/grafana-toolkit/src/cli/utils/githubRelease.ts
+++ b/packages/grafana-toolkit/src/cli/utils/githubRelease.ts
@@ -8,7 +8,7 @@ import { AxiosResponse } from 'axios';
 
 const resolveContentType = (extension: string): string => {
   if (extension.startsWith('.')) {
-    extension = extension.substr(1);
+    extension = extension.slice(1);
   }
   switch (extension) {
     case 'zip':
diff --git a/packages/grafana-toolkit/src/config/webpack.plugin.config.ts b/packages/grafana-toolkit/src/config/webpack.plugin.config.ts
index 9764abc0070..60ccf8f3c81 100644
--- a/packages/grafana-toolkit/src/config/webpack.plugin.config.ts
+++ b/packages/grafana-toolkit/src/config/webpack.plugin.config.ts
@@ -197,7 +197,7 @@ const getBaseWebpackConfig: WebpackConfigurationGetter = async (options) => {
       (context, request, callback) => {
         const prefix = 'grafana/';
         if (request.indexOf(prefix) === 0) {
-          return callback(null, request.substr(prefix.length));
+          return callback(null, request.slice(prefix.length));
         }
 
         // @ts-ignore
diff --git a/packages/grafana-ui/src/utils/dom.ts b/packages/grafana-ui/src/utils/dom.ts
index 72730da7d2c..c81d80af9d8 100644
--- a/packages/grafana-ui/src/utils/dom.ts
+++ b/packages/grafana-ui/src/utils/dom.ts
@@ -37,5 +37,5 @@ export function getNextCharacter(global?: any) {
   const range = selection.getRangeAt(0);
   const text = selection.anchorNode.textContent;
   const offset = range.startOffset;
-  return text!.substr(offset, 1);
+  return text!.slice(offset, offset + 1);
 }
diff --git a/packages/jaeger-ui-components/src/utils/filter-spans.tsx b/packages/jaeger-ui-components/src/utils/filter-spans.tsx
index de9e52634e2..6647201bf37 100644
--- a/packages/jaeger-ui-components/src/utils/filter-spans.tsx
+++ b/packages/jaeger-ui-components/src/utils/filter-spans.tsx
@@ -32,7 +32,7 @@ export default function filterSpans(textFilter: string, spans: TraceSpan[] | TNi
     .filter(Boolean)
     .forEach((w) => {
       if (w[0] === '-') {
-        excludeKeys.push(w.substr(1).toLowerCase());
+        excludeKeys.push(w.slice(1).toLowerCase());
       } else {
         includeFilters.push(w.toLowerCase());
       }
diff --git a/public/app/angular/AngularLocationWrapper.ts b/public/app/angular/AngularLocationWrapper.ts
index b7c8a1318ea..4c6f5c133c2 100644
--- a/public/app/angular/AngularLocationWrapper.ts
+++ b/public/app/angular/AngularLocationWrapper.ts
@@ -35,7 +35,7 @@ export class AngularLocationWrapper {
     navigationLogger('AngularLocationWrapper', false, 'Angular compat layer: hash');
 
     if (!newHash) {
-      return locationService.getLocation().hash.substr(1);
+      return locationService.getLocation().hash.slice(1);
     } else {
       throw new Error('AngularLocationWrapper method not implemented.');
     }
diff --git a/public/app/core/utils/kbn.ts b/public/app/core/utils/kbn.ts
index d4ff3e73d72..1921244088a 100644
--- a/public/app/core/utils/kbn.ts
+++ b/public/app/core/utils/kbn.ts
@@ -105,7 +105,7 @@ const kbn = {
       const decimalPos = formatted.indexOf('.');
       const precision = decimalPos === -1 ? 0 : formatted.length - decimalPos - 1;
       if (precision < decimals) {
-        return (precision ? formatted : formatted + '.') + String(factor).substr(1, decimals - precision);
+        return (precision ? formatted : formatted + '.') + String(factor).slice(1, decimals - precision + 1);
       }
     }
 
diff --git a/public/app/features/alerting/unified/components/AlertManagerPicker.tsx b/public/app/features/alerting/unified/components/AlertManagerPicker.tsx
index 782a7b8346b..e0107dbc575 100644
--- a/public/app/features/alerting/unified/components/AlertManagerPicker.tsx
+++ b/public/app/features/alerting/unified/components/AlertManagerPicker.tsx
@@ -25,7 +25,7 @@ export const AlertManagerPicker: FC<Props> = ({ onChange, current, disabled = fa
       ...getAllDataSources()
         .filter((ds) => ds.type === DataSourceType.Alertmanager)
         .map((ds) => ({
-          label: ds.name.substr(0, 37),
+          label: ds.name.slice(0, 37),
           value: ds.name,
           imgUrl: ds.meta.info.logos.small,
           meta: ds.meta,
diff --git a/public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx b/public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx
index ab128527592..cccace4b931 100644
--- a/public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx
+++ b/public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx
@@ -77,7 +77,7 @@ const columns: AlertTableColumnProps[] = [
     label: 'Created',
     // eslint-disable-next-line react/display-name
     renderCell: ({ data: { activeAt } }) => (
-      <>{activeAt.startsWith('0001') ? '-' : activeAt.substr(0, 19).replace('T', ' ')}</>
+      <>{activeAt.startsWith('0001') ? '-' : activeAt.slice(0, 19).replace('T', ' ')}</>
     ),
     size: '150px',
   },
diff --git a/public/app/features/alerting/unified/hooks/useCombinedRuleNamespaces.ts b/public/app/features/alerting/unified/hooks/useCombinedRuleNamespaces.ts
index 657d33a9113..259ff2af8c3 100644
--- a/public/app/features/alerting/unified/hooks/useCombinedRuleNamespaces.ts
+++ b/public/app/features/alerting/unified/hooks/useCombinedRuleNamespaces.ts
@@ -228,7 +228,7 @@ function isCombinedRuleEqualToPromRule(combinedRule: CombinedRule, rule: Rule, c
 function hashQuery(query: string) {
   // one of them might be wrapped in parens
   if (query.length > 1 && query[0] === '(' && query[query.length - 1] === ')') {
-    query = query.substr(1, query.length - 2);
+    query = query.slice(1, -1);
   }
   // whitespace could be added or removed
   query = query.replace(/\s|\n/g, '');
diff --git a/public/app/features/alerting/unified/utils/alertmanager.ts b/public/app/features/alerting/unified/utils/alertmanager.ts
index 4e93b0824a4..cf904d2dc54 100644
--- a/public/app/features/alerting/unified/utils/alertmanager.ts
+++ b/public/app/features/alerting/unified/utils/alertmanager.ts
@@ -143,8 +143,8 @@ export function parseMatcher(matcher: string): Matcher {
     throw new Error(`Invalid matcher: ${trimmed}`);
   }
   const [operator, idx] = operatorsFound[0];
-  const name = trimmed.substr(0, idx).trim();
-  const value = trimmed.substr(idx + operator.length).trim();
+  const name = trimmed.slice(0, idx).trim();
+  const value = trimmed.slice(idx + operator.length).trim();
   if (!name) {
     throw new Error(`Invalid matcher: ${trimmed}`);
   }
@@ -235,12 +235,12 @@ export function getWeekdayString(weekdays?: string[]): string {
             .split(':')
             .map((d) => {
               const abbreviated = d.slice(0, 3);
-              return abbreviated[0].toLocaleUpperCase() + abbreviated.substr(1);
+              return abbreviated[0].toLocaleUpperCase() + abbreviated.slice(1);
             })
             .join('-');
         } else {
           const abbreviated = day.slice(0, 3);
-          return abbreviated[0].toLocaleUpperCase() + abbreviated.substr(1);
+          return abbreviated[0].toLocaleUpperCase() + abbreviated.slice(1);
         }
       })
       .join(', ') ?? 'All')
diff --git a/public/app/features/dashboard/components/PanelEditor/utils.ts b/public/app/features/dashboard/components/PanelEditor/utils.ts
index 37c626d4c5b..868476b6241 100644
--- a/public/app/features/dashboard/components/PanelEditor/utils.ts
+++ b/public/app/features/dashboard/components/PanelEditor/utils.ts
@@ -71,7 +71,7 @@ export function setOptionImmutably<T extends object>(options: T, path: string |
   if (key.endsWith(']')) {
     const idx = key.lastIndexOf('[');
     const index = +key.substring(idx + 1, key.length - 1);
-    const propKey = key.substr(0, idx);
+    const propKey = key.substring(0, idx);
     let current = (options as Record<string, any>)[propKey];
     const arr = Array.isArray(current) ? [...current] : [];
     if (splat.length) {
diff --git a/public/app/features/dimensions/editors/FolderPickerTab.tsx b/public/app/features/dimensions/editors/FolderPickerTab.tsx
index c3e9ae05155..13fa478d577 100644
--- a/public/app/features/dimensions/editors/FolderPickerTab.tsx
+++ b/public/app/features/dimensions/editors/FolderPickerTab.tsx
@@ -82,7 +82,7 @@ export const FolderPickerTab = (props: Props) => {
                   cards.push({
                     value: `${folder}/${item.name}`,
                     label: item.name,
-                    search: (idx ? item.name.substr(0, idx) : item.name).toLowerCase(),
+                    search: (idx ? item.name.substring(0, idx) : item.name).toLowerCase(),
                     imgUrl: `public/${folder}/${item.name}`,
                   });
                 }
diff --git a/public/app/features/dimensions/editors/ResourceCards.tsx b/public/app/features/dimensions/editors/ResourceCards.tsx
index 0082db74a80..aeaa1fc6758 100644
--- a/public/app/features/dimensions/editors/ResourceCards.tsx
+++ b/public/app/features/dimensions/editors/ResourceCards.tsx
@@ -40,7 +40,7 @@ function Cell(props: CellProps) {
           ) : (
             <img src={card.imgUrl} className={styles.img} />
           )}
-          <h6 className={styles.text}>{card.label.substr(0, card.label.length - 4)}</h6>
+          <h6 className={styles.text}>{card.label.slice(0, -4)}</h6>
         </div>
       )}
     </div>
diff --git a/public/app/features/manage-dashboards/components/SnapshotListTable.tsx b/public/app/features/manage-dashboards/components/SnapshotListTable.tsx
index dd6c0eae769..29c7c38325e 100644
--- a/public/app/features/manage-dashboards/components/SnapshotListTable.tsx
+++ b/public/app/features/manage-dashboards/components/SnapshotListTable.tsx
@@ -19,7 +19,7 @@ export const SnapshotListTable: FC = () => {
   const [removeSnapshot, setRemoveSnapshot] = useState<Snapshot | undefined>();
   const currentPath = locationService.getLocation().pathname;
   const fullUrl = window.location.href;
-  const baseUrl = fullUrl.substr(0, fullUrl.indexOf(currentPath));
+  const baseUrl = fullUrl.substring(0, fullUrl.indexOf(currentPath));
 
   useAsync(async () => {
     const response = await getSnapshots();
diff --git a/public/app/plugins/datasource/cloudwatch/datasource.ts b/public/app/plugins/datasource/cloudwatch/datasource.ts
index 734fa4c93fe..2d126b05570 100644
--- a/public/app/plugins/datasource/cloudwatch/datasource.ts
+++ b/public/app/plugins/datasource/cloudwatch/datasource.ts
@@ -1031,5 +1031,5 @@ function withTeardown<T = any>(observable: Observable<T>, onUnsubscribe: () => v
 
 function parseLogGroupName(logIdentifier: string): string {
   const colonIndex = logIdentifier.lastIndexOf(':');
-  return logIdentifier.substr(colonIndex + 1);
+  return logIdentifier.slice(colonIndex + 1);
 }
diff --git a/public/app/plugins/datasource/loki/query_utils.ts b/public/app/plugins/datasource/loki/query_utils.ts
index d9c9393fe5e..f4432345045 100644
--- a/public/app/plugins/datasource/loki/query_utils.ts
+++ b/public/app/plugins/datasource/loki/query_utils.ts
@@ -22,9 +22,9 @@ export function getHighlighterExpressionsFromQuery(input: string): string[] {
       break;
     }
     // Drop terms for negative filters
-    const filterOperator = expression.substr(filterStart, 2);
-    const skip = expression.substr(filterStart).search(/!=|!~/) === 0;
-    expression = expression.substr(filterStart + 2);
+    const filterOperator = expression.slice(filterStart, filterStart + 2);
+    const skip = expression.slice(filterStart).search(/!=|!~/) === 0;
+    expression = expression.slice(filterStart + 2);
     if (skip) {
       continue;
     }
@@ -34,8 +34,8 @@ export function getHighlighterExpressionsFromQuery(input: string): string[] {
     if (filterEnd === -1) {
       filterTerm = expression.trim();
     } else {
-      filterTerm = expression.substr(0, filterEnd).trim();
-      expression = expression.substr(filterEnd);
+      filterTerm = expression.slice(0, filterEnd).trim();
+      expression = expression.slice(filterEnd);
     }
 
     const quotedTerm = filterTerm.match(/"(.*?)"/);
diff --git a/public/app/plugins/datasource/loki/result_transformer.ts b/public/app/plugins/datasource/loki/result_transformer.ts
index f148331361c..1f763448553 100644
--- a/public/app/plugins/datasource/loki/result_transformer.ts
+++ b/public/app/plugins/datasource/loki/result_transformer.ts
@@ -62,7 +62,7 @@ export function lokiStreamResultToDataFrame(stream: LokiStreamResult, reverse?:
 
   for (const [ts, line] of stream.values) {
     // num ns epoch in string, we convert it to iso string here so it matches old format
-    times.add(new Date(parseInt(ts.substr(0, ts.length - 6), 10)).toISOString());
+    times.add(new Date(parseInt(ts.slice(0, -6), 10)).toISOString());
     timesNs.add(ts);
     lines.add(line);
     uids.add(createUid(ts, labelsString, line, usedUids, refId));
@@ -148,7 +148,7 @@ export function appendResponseToBufferedData(response: LokiTailResponse, data: M
 
     // Add each line
     for (const [ts, line] of stream.values) {
-      tsField.values.add(new Date(parseInt(ts.substr(0, ts.length - 6), 10)).toISOString());
+      tsField.values.add(new Date(parseInt(ts.slice(0, -6), 10)).toISOString());
       tsNsField.values.add(ts);
       lineField.values.add(line);
       labelsField.values.add(unique);
diff --git a/public/app/plugins/datasource/prometheus/language_utils.ts b/public/app/plugins/datasource/prometheus/language_utils.ts
index 2f71858a388..fac108a8b4e 100644
--- a/public/app/plugins/datasource/prometheus/language_utils.ts
+++ b/public/app/plugins/datasource/prometheus/language_utils.ts
@@ -142,8 +142,8 @@ function addLabelsToExpression(expr: string, invalidLabelsRegexp: RegExp) {
 
   // Split query into 2 parts - before the invalidLabelsRegex match and after.
   const indexOfRegexMatch = match.index ?? 0;
-  const exprBeforeRegexMatch = expr.substr(0, indexOfRegexMatch + 1);
-  const exprAfterRegexMatch = expr.substr(indexOfRegexMatch + 1);
+  const exprBeforeRegexMatch = expr.slice(0, indexOfRegexMatch + 1);
+  const exprAfterRegexMatch = expr.slice(indexOfRegexMatch + 1);
 
   // Create arrayOfLabelObjects with label objects that have key, operator and value.
   const arrayOfLabelObjects: Array<{ key: string; operator: string; value: string }> = [];
@@ -157,7 +157,7 @@ function addLabelsToExpression(expr: string, invalidLabelsRegexp: RegExp) {
   let result = exprBeforeRegexMatch;
   arrayOfLabelObjects.filter(Boolean).forEach((obj) => {
     // Remove extra set of quotes from obj.value
-    const value = obj.value.substr(1, obj.value.length - 2);
+    const value = obj.value.slice(1, -1);
     result = addLabelToQuery(result, obj.key, value, obj.operator);
   });