Refactor: JS substr() is deprecated, using slice() instead (#37136)

Summary:
Fixes: https://github.com/facebook/react-native/issues/37135

- `substr()` is not part of the core JS since ~2018
- No wonder why no one noticed this :)
- Though its supported by modern browsers, its deprecated
- Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr

### Why `slice()` and not `substring()`?
> Beacuse I like pizza ;) jk

The reason, that I'm not using the most obvious alternative `substring()` is;
- It _swaps the args_ passed, when; `startIndex > endIndex` —which I think is not a property of _good_ fn
  and also does not reflects the same in it's name.
- It _doesn't support negative args_, which I think reduces flexibility to work with it.
- It could lead to more bugs in most of the cases.

### Refecrences:
- Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring#differences_between_substring_and_slice
- Ref. for `slice()`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice
- Ref. for `substring()`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring

## Changelog:

[GENERAL][FIXED] - Refactor: `substr()` is deprecated, using `slice()` instead across RN codebase

Pull Request resolved: https://github.com/facebook/react-native/pull/37136

Test Plan: - `yarn lint && yarn flow && yarn test-ci` --> _should be green_

Reviewed By: christophpurrer

Differential Revision: D45477910

Pulled By: jacdebug

fbshipit-source-id: 96a80893477599b9a549918924157627b9b0c3f4

packages/assets/path-support.js

@@ -82,7 +82,7 @@ function getAndroidResourceIdentifier(asset: PackagerAsset): string {
 
 function getBasePath(asset: PackagerAsset): string {
   const basePath = asset.httpServerLocation;
-  return basePath.startsWith('/') ? basePath.substr(1) : basePath;
+  return basePath.startsWith('/') ? basePath.slice(1) : basePath;
 }
 
 module.exports = {

packages/hermes-inspector-msggen/src/Converters.js

@@ -9,11 +9,11 @@
  */
 
 export function toCppNamespace(domain: string): string {
-  return domain.substr(0, 1).toLowerCase() + domain.substr(1);
+  return domain.slice(0, 1).toLowerCase() + domain.slice(1);
 }
 
 export function toCppType(type: string): string {
-  return type.substr(0, 1).toUpperCase() + type.substr(1);
+  return type.slice(0, 1).toUpperCase() + type.slice(1);
 }
 
 export type JsTypeString =

packages/hermes-inspector-msggen/src/Property.js

@@ -114,8 +114,8 @@ function toDomainAndId(
     domain = curDomain;
     id = absOrRelRef;
   } else {
-    domain = absOrRelRef.substr(0, i);
-    id = absOrRelRef.substr(i + 1);
+    domain = absOrRelRef.slice(0, i);
+    id = absOrRelRef.slice(i + 1);
   }
 
   return [domain, id];

packages/polyfills/console.js

@@ -252,7 +252,7 @@ const inspect = (function () {
                 return '  ' + line;
               })
               .join('\n')
-              .substr(2);
+              .slice(2);
           } else {
             str =
               '\n' +
@@ -274,7 +274,7 @@ const inspect = (function () {
       }
       name = JSON.stringify('' + key);
       if (name.match(/^"([a-zA-Z_][a-zA-Z_0-9]*)"$/)) {
-        name = name.substr(1, name.length - 2);
+        name = name.slice(1, name.length - 1);
         name = ctx.stylize(name, 'name');
       } else {
         name = name

packages/react-native/Libraries/DOM/Nodes/ReadOnlyCharacterData.js

@@ -67,6 +67,6 @@ export default class ReadOnlyCharacterData extends ReadOnlyNode {
       );
     }
     let adjustedCount = count < 0 || count > data.length ? data.length : count;
-    return data.substr(offset, adjustedCount);
+    return data.slice(offset, offset + adjustedCount);
   }
 }

packages/react-native/Libraries/Inspector/NetworkOverlay.js

@@ -64,7 +64,7 @@ function getStringByValue(value: any): string {
   }
   if (typeof value === 'string' && value.length > 500) {
     return String(value)
-      .substr(0, 500)
+      .slice(0, 500)
       .concat('\n***TRUNCATED TO 500 CHARACTERS***');
   }
   return value;

packages/react-native/Libraries/LogBox/UI/AnsiHighlight.js

@@ -73,7 +73,7 @@ export default function Ansi({
       return content.replace(/\| $/, ' ');
     } else if (key === 2 && commonWhitespaceLength < Infinity) {
       // Remove common whitespace at the beginning of the line
-      return content.substr(commonWhitespaceLength);
+      return content.slice(commonWhitespaceLength);
     } else {
       return content;
     }

packages/react-native/Libraries/LogBox/UI/LogBoxMessage.js

@@ -138,17 +138,14 @@ function LogBoxMessage(props: Props): React.Node {
     const key = String(index);
 
     if (substitution.offset > prevOffset) {
-      const prevPart = content.substr(
-        prevOffset,
-        substitution.offset - prevOffset,
-      );
+      const prevPart = content.slice(prevOffset, substitution.offset);
 
       createUnderLength(key, prevPart);
     }
 
-    const substitutionPart = content.substr(
+    const substitutionPart = content.slice(
       substitution.offset,
-      substitution.length,
+      substitution.offset + substitution.length,
     );
 
     createUnderLength(key + '.5', substitutionPart, substitutionStyle);
@@ -156,7 +153,7 @@ function LogBoxMessage(props: Props): React.Node {
   }, 0);
 
   if (lastOffset < content.length) {
-    const lastPart = content.substr(lastOffset);
+    const lastPart = content.slice(lastOffset);
     createUnderLength('-1', lastPart);
   }
 

packages/react-native/Libraries/Utilities/PolyfillFunctions.js

@@ -32,7 +32,7 @@ function polyfillObjectProperty<T>(
 ): void {
   const descriptor = Object.getOwnPropertyDescriptor<$FlowFixMe>(object, name);
   if (__DEV__ && descriptor) {
-    const backupName = `original${name[0].toUpperCase()}${name.substr(1)}`;
+    const backupName = `original${name[0].toUpperCase()}${name.slice(1)}`;
     Object.defineProperty(object, backupName, descriptor);
   }
 

packages/react-native/ReactAndroid/src/androidTest/js/TextInputTestModule.js

@@ -47,7 +47,7 @@ class TokenizedTextExample extends React.Component {
       if (token[0].length === 0) {
         index = 1;
       }
-      parts.push(_text.substr(0, index));
+      parts.push(_text.slice(0, index));
       parts.push(token[0]);
       index = index + token[0].length;
       _text = _text.slice(index);

packages/rn-tester/js/components/ListExampleShared.js

@@ -38,7 +38,7 @@ function genItemData(i: number): Item {
   const itemHash = Math.abs(hashCode('Item ' + i));
   return {
     title: 'Item ' + i,
-    text: LOREM_IPSUM.substr(0, (itemHash % 301) + 20),
+    text: LOREM_IPSUM.slice(0, (itemHash % 301) + 20),
     key: String(i),
     pressed: false,
   };

packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js

@@ -438,7 +438,7 @@ class TokenizedTextExample extends React.Component<
       if (token[0].length === 0) {
         index = 1;
       }
-      parts.push(_text.substr(0, index));
+      parts.push(_text.slice(0, index));
       parts.push(token[0]);
       index = index + token[0].length;
       _text = _text.slice(index);

tools/eslint/rules/valid-flow-typed-signature.js

@@ -34,7 +34,7 @@ module.exports = {
         const sourceText = context.getSourceCode().getText();
 
         const firstLineEndIndex = sourceText.indexOf('\n');
-        const firstLine = sourceText.substr(0, firstLineEndIndex);
+        const firstLine = sourceText.slice(0, firstLineEndIndex);
 
         const match = firstLine.match(HASH_COMMENT_RE);
         if (match == null) {
@@ -43,7 +43,7 @@ module.exports = {
         }
 
         const hash = match[1];
-        const versionedCode = sourceText.substr(firstLineEndIndex + 1);
+        const versionedCode = sourceText.slice(firstLineEndIndex + 1);
         if (md5(versionedCode) === hash) {
           return;
         }