Merge pull request #7662 from JBR-0100/fix/deprecated-substr

refactor: replace deprecated String.substr with String.slice

Author: camdecoster

draftlogs/7662_change.md

@@ -0,0 +1 @@
+ - Replace deprecated `String.substr()` with `String.slice()` [[#7662](https://github.com/plotly/plotly.js/pull/7662)], with thanks to @JBR-0100 for the contribution!

src/components/calendars/index.js

@@ -143,7 +143,7 @@ function worldCalFmt(fmt, x, calendar) {
             // format the cDate according to the translated directive
             else replacementPart = cDate.formatDate(directiveObj[modifier]);
 
-            fmt = fmt.substr(0, i) + replacementPart + fmt.substr(i + directiveLen);
+            fmt = fmt.slice(0, i) + replacementPart + fmt.slice(i + directiveLen);
             i += replacementPart.length;
         }
     }

src/components/color/index.js

@@ -117,13 +117,13 @@ color.clean = function(container) {
         key = keys[i];
         val = container[key];
 
-        if(key.substr(key.length - 5) === 'color') {
+        if(key.slice(-5) === 'color') {
             // only sanitize keys that end in "color" or "colorscale"
 
             if(Array.isArray(val)) {
                 for(j = 0; j < val.length; j++) val[j] = cleanOne(val[j]);
             } else container[key] = cleanOne(val);
-        } else if(key.substr(key.length - 10) === 'colorscale' && Array.isArray(val)) {
+        } else if(key.slice(-10) === 'colorscale' && Array.isArray(val)) {
             // colorscales have the format [[0, color1], [frac, color2], ... [1, colorN]]
 
             for(j = 0; j < val.length; j++) {
@@ -144,7 +144,7 @@ function cleanOne(val) {
     if(isNumeric(val) || typeof val !== 'string') return val;
 
     var valTrim = val.trim();
-    if(valTrim.substr(0, 3) !== 'rgb') return val;
+    if(valTrim.slice(0, 3) !== 'rgb') return val;
 
     var match = valTrim.match(/^rgba?\s*\(([^()]*)\)$/);
     if(!match) return val;

src/components/colorbar/draw.js

@@ -338,7 +338,7 @@ function drawColorBar(g, opts, gd) {
         // wrong class (in case earlier the colorbar was drawn on
         // a different side, I think?)
         var otherClass = titleClass.charAt(0) === 'h' ?
-            titleClass.substr(1) :
+            titleClass.slice(1) :
             'h' + titleClass;
         g.selectAll('.' + otherClass + ',.' + otherClass + '-math-group').remove();
 

src/components/rangeslider/defaults.js

@@ -45,10 +45,10 @@ module.exports = function handleDefaults(layoutIn, layoutOut, axName) {
     if(subplots) {
         var yIds = subplots.cartesian
             .filter(function(subplotId) {
-                return subplotId.substr(0, subplotId.indexOf('y')) === axisIds.name2id(axName);
+                return subplotId.slice(0, Math.max(0, subplotId.indexOf('y'))) === axisIds.name2id(axName);
             })
             .map(function(subplotId) {
-                return subplotId.substr(subplotId.indexOf('y'), subplotId.length);
+                return subplotId.slice(subplotId.indexOf('y'), subplotId.length);
             });
         var yNames = Lib.simpleMap(yIds, axisIds.id2name);
         for(var i = 0; i < yNames.length; i++) {

src/components/shapes/calc_autorange.js

@@ -115,7 +115,7 @@ function shapeBounds(ax, shape, paramsToUse) {
         drawnParam = paramsToUse[segment.charAt(0)].drawn;
         if(drawnParam === undefined) continue;
 
-        params = segments[i].substr(1).match(constants.paramRE);
+        params = segments[i].slice(1).match(constants.paramRE);
         if(!params || params.length < drawnParam) continue;
 
         val = convertVal(params[drawnParam]);

src/components/shapes/draw.js

@@ -620,7 +620,7 @@ function movePath(pathIn, moveX, moveY) {
         var yParams = constants.paramIsY[segmentType];
         var nParams = constants.numParams[segmentType];
 
-        var paramString = segment.substr(1).replace(constants.paramRE, function(param) {
+        var paramString = segment.slice(1).replace(constants.paramRE, function(param) {
             if(paramNumber >= nParams) return param;
 
             if(xParams[paramNumber]) param = moveX(param);

src/components/shapes/helpers.js

@@ -41,7 +41,7 @@ exports.extractPathCoords = function(path, paramsToUse, isRaw) {
         var relevantParamIdx = paramsToUse[segment.charAt(0)].drawn;
         if(relevantParamIdx === undefined) return;
 
-        var params = segment.substr(1).match(constants.paramRE);
+        var params = segment.slice(1).match(constants.paramRE);
         if(!params || params.length < relevantParamIdx) return;
 
         var str = params[relevantParamIdx];
@@ -261,7 +261,7 @@ function convertPath(options, x2p, y2p) {
         var yParams = constants.paramIsY[segmentType];
         var nParams = constants.numParams[segmentType];
 
-        var paramString = segment.substr(1).replace(constants.paramRE, function(param) {
+        var paramString = segment.slice(1).replace(constants.paramRE, function(param) {
             if(xParams[paramNumber]) {
                 if(xSizemode === 'pixel') param = x2p(xAnchor) + Number(param);
                 else param = x2p(param);

src/lib/coerce.js

@@ -76,7 +76,7 @@ exports.valObjectMeta = {
                 var k = String(values[i]);
 
                 if((k.charAt(0) === '/' && k.charAt(k.length - 1) === '/')) {
-                    var regex = new RegExp(k.substr(1, k.length - 2));
+                    var regex = new RegExp(k.slice(1, -1));
                     if(regex.test(v)) return true;
                 } else if(v === values[i]) return true;
             }

src/lib/dates.js

@@ -166,11 +166,11 @@ exports.dateTime2ms = function(s, calendar) {
     // 'G' as a prefix to force the built-in gregorian calendar.
     var s0 = s.charAt(0);
     if(isWorld && (s0 === 'G' || s0 === 'g')) {
-        s = s.substr(1);
+        s = s.slice(1);
         calendar = '';
     }
 
-    var isChinese = isWorld && calendar.substr(0, 7) === 'chinese';
+    var isChinese = isWorld && calendar.slice(0, 7) === 'chinese';
 
     var match = s.match(isChinese ? DATETIME_REGEXP_CN : DATETIME_REGEXP);
     if(!match) return BADNUM;
@@ -234,7 +234,7 @@ exports.isDateTime = function(s, calendar) {
 
 // pad a number with zeroes, to given # of digits before the decimal point
 function lpad(val, digits) {
-    return String(val + Math.pow(10, digits)).substr(1);
+    return String(val + Math.pow(10, digits)).slice(1);
 }
 
 /**
@@ -272,7 +272,7 @@ exports.ms2DateTime = function(ms, r, calendar) {
         // other things for a few calendars, so we can't trust it. Just pad
         // it manually (after the '-' if there is one)
         if(dateStr.charAt(0) === '-') {
-            while(dateStr.length < 11) dateStr = '-0' + dateStr.substr(1);
+            while(dateStr.length < 11) dateStr = '-0' + dateStr.slice(1);
         } else {
             while(dateStr.length < 10) dateStr = '0' + dateStr;
         }
@@ -388,7 +388,7 @@ function modDateFormat(fmt, x, formatter, calendar) {
         var digits = Math.min(+(match.charAt(1)) || 6, 6);
         var fracSecs = ((x / 1000 % 1) + 2)
             .toFixed(digits)
-            .substr(2).replace(/0+$/, '') || '0';
+            .slice(2).replace(/0+$/, '') || '0';
         return fracSecs;
     });
 
@@ -441,7 +441,7 @@ function formatTime(x, tr) {
          */
         var sec = Math.min(mod(x / ONESEC, 60), MAXSECONDS[tr]);
 
-        var secStr = (100 + sec).toFixed(tr).substr(1);
+        var secStr = (100 + sec).toFixed(tr).slice(1);
         if(tr > 0) {
             secStr = secStr.replace(/0+$/, '').replace(/[\.]$/, '');
         }