refactor: replace deprecated String.substr with String.slice

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(/[\.]$/, '');
         }

src/lib/index.js

@@ -462,7 +462,7 @@ lib.syncOrAsync = function (sequence, arg, finalStep) {
  * http://stackoverflow.com/questions/6680825/return-string-without-trailing-slash
  */
 lib.stripTrailingSlash = function (str) {
-    if (str.substr(-1) === '/') return str.substr(0, str.length - 1);
+    if (str.slice(-1) === '/') return str.slice(0, -1);
     return str;
 };
 
@@ -737,7 +737,7 @@ function minExtend(obj1, obj2, opt) {
 lib.minExtend = minExtend;
 
 lib.titleCase = function (s) {
-    return s.charAt(0).toUpperCase() + s.substr(1);
+    return s.charAt(0).toUpperCase() + s.slice(1);
 };
 
 lib.containsAny = function (s, fragments) {

src/lib/nested_property.js

@@ -20,7 +20,7 @@ var isArrayOrTypedArray = require('./array').isArrayOrTypedArray;
 module.exports = function nestedProperty(container, propStr) {
     if(isNumeric(propStr)) propStr = String(propStr);
     else if(typeof propStr !== 'string' ||
-            propStr.substr(propStr.length - 4) === '[-1]') {
+            propStr.slice(-4) === '[-1]') {
         throw 'bad property string';
     }
 
@@ -48,7 +48,7 @@ module.exports = function nestedProperty(container, propStr) {
             else throw 'bad property string';
 
             indices = indexed[2]
-                .substr(1, indexed[2].length - 2)
+                .slice(1, -1)
                 .split('][');
 
             for(i = 0; i < indices.length; i++) {

src/lib/override_cursor.js

@@ -19,7 +19,7 @@ module.exports = function overrideCursor(el3, csr) {
             for(var i = 0; i < classes.length; i++) {
                 var cls = classes[i];
                 if(cls.indexOf('cursor-') === 0) {
-                    el3.attr(STASHATTR, cls.substr(7))
+                    el3.attr(STASHATTR, cls.slice(7))
                         .classed(cls, false);
                 }
             }

src/lib/preserve_drawing_buffer.js

@@ -28,8 +28,8 @@ module.exports = function preserveDrawingBuffer(opts) {
                 // find Safari version
                 for(var k = i - 1; k > -1; k--) {
                     var prevPart = allParts[k];
-                    if(prevPart.substr(0, 8) === 'Version/') {
-                        var v = prevPart.substr(8).split('.')[0];
+                    if(prevPart.slice(0, 8) === 'Version/') {
+                        var v = prevPart.slice(8).split('.')[0];
                         if(isNumeric(v)) v = +v;
                         if(v >= 13) return true;
                     }

src/lib/svg_text_utils.js

@@ -458,9 +458,9 @@ exports.plainText = function(_str, opts) {
                 }
 
                 if(len > eLen) {
-                    newParts.push(p.substr(0, pLen2 - eLen) + ellipsis);
+                    newParts.push(p.slice(0, Math.max(0, pLen2 - eLen)) + ellipsis);
                 } else {
-                    newParts.push(p.substr(0, pLen2));
+                    newParts.push(p.slice(0, pLen2));
                 }
                 break;
             }
@@ -508,8 +508,8 @@ function convertEntities(_str) {
             // cannot use String.fromCodePoint in IE
             outChar = fromCodePoint(
                 innerMatch.charAt(1) === 'x' ?
-                    parseInt(innerMatch.substr(2), 16) :
-                    parseInt(innerMatch.substr(1), 10)
+                    parseInt(innerMatch.slice(2), 16) :
+                    parseInt(innerMatch.slice(1), 10)
             );
         } else outChar = entityToUnicode[innerMatch];
 

src/plot_api/container_array_match.js

@@ -37,7 +37,7 @@ module.exports = function containerArrayMatch(astr) {
 
     if(!arrayStr) return false;
 
-    var tail = astr.substr(arrayStr.length);
+    var tail = astr.slice(arrayStr.length);
     if(!tail) return {array: arrayStr, index: '', property: ''};
 
     match = tail.match(/^\[(0|[1-9][0-9]*)\](\.(.+))?$/);

src/plot_api/helpers.js

@@ -322,7 +322,7 @@ function commonPrefix(name1, name2, show1, show2) {
         if (name1.charAt(i) !== name2.charAt(i)) break;
     }
 
-    var out = name1.substr(0, i);
+    var out = name1.slice(0, i);
     return out.trim();
 }
 
@@ -453,7 +453,7 @@ var ATTR_TAIL_RE = /(\.[^\[\]\.]+|\[[^\[\]\.]+\])$/;
 
 function getParent(attr) {
     var tail = attr.search(ATTR_TAIL_RE);
-    if (tail > 0) return attr.substr(0, tail);
+    if (tail > 0) return attr.slice(0, tail);
 }
 
 /**
@@ -493,8 +493,8 @@ exports.clearAxisTypes = function (gd, traces, layoutUpdate) {
             // do not clear log type - that's never an auto result so must have been intentional
             if (ax && ax.type !== 'log') {
                 var axAttr = ax._name;
-                var sceneName = ax._id.substr(1);
-                if (sceneName.substr(0, 5) === 'scene') {
+                var sceneName = ax._id.slice(1);
+                if (sceneName.slice(0, 5) === 'scene') {
                     if (layoutUpdate[sceneName] !== undefined) continue;
                     axAttr = sceneName + '.' + axAttr;
                 }

src/plot_api/plot_api.js

@@ -1436,7 +1436,7 @@ function _restyle(gd, aobj, traces) {
         if (attr in aobj || helpers.hasParent(aobj, attr)) return;
 
         var extraparam;
-        if (attr.substr(0, 6) === 'LAYOUT') {
+        if (attr.slice(0, 6) === 'LAYOUT') {
             extraparam = layoutNP(gd.layout, attr.replace('LAYOUT', ''));
         } else {
             var tracei = traces[i];
@@ -1495,7 +1495,7 @@ function _restyle(gd, aobj, traces) {
 
         redoit[ai] = vi;
 
-        if (ai.substr(0, 6) === 'LAYOUT') {
+        if (ai.slice(0, 6) === 'LAYOUT') {
             param = layoutNP(gd.layout, ai.replace('LAYOUT', ''));
             undoit[ai] = [undefinedToNull(param.get())];
             // since we're allowing val to be an array, allow it here too,
@@ -1520,7 +1520,7 @@ function _restyle(gd, aobj, traces) {
             if (newVal === undefined) continue;
 
             var finalPart = param.parts[param.parts.length - 1];
-            var prefix = ai.substr(0, ai.length - finalPart.length - 1);
+            var prefix = ai.slice(0, ai.length - finalPart.length - 1);
             var prefixDot = prefix ? prefix + '.' : '';
             var innerContFull = prefix ? nestedProperty(contFull, prefix).get() : contFull;
 
@@ -1872,7 +1872,7 @@ function _relayout(gd, aobj) {
     for (i = 0; i < keys.length; i++) {
         if (keys[i].indexOf('allaxes') === 0) {
             for (j = 0; j < axes.length; j++) {
-                var scene = axes[j]._id.substr(1);
+                var scene = axes[j]._id.slice(1);
                 var axisAttr = scene.indexOf('scene') !== -1 ? scene + '.' : '';
                 var newkey = keys[i].replace('allaxes', axisAttr + axes[j]._name);
 
@@ -2369,7 +2369,7 @@ function findUIPattern(key, patternSpecs) {
         var match = key.match(spec.pattern);
         if (match) {
             var head = match[1] || '';
-            return { head: head, tail: key.substr(head.length + 1), attr: spec.attr };
+            return { head: head, tail: key.slice(head.length + 1), attr: spec.attr };
         }
     }
 }
@@ -2446,7 +2446,7 @@ function applyUIRevisions(data, layout, oldFullData, oldFullLayout) {
                     }
                     newNP.set(undefinedToNull(nestedProperty(oldFullLayout, key).get()));
                     continue;
-                } else if (tail === 'autorange' || tail.substr(0, 6) === 'range[') {
+                } else if (tail === 'autorange' || tail.slice(0, 6) === 'range[') {
                     // Special case for (auto)range since we push it back into the layout
                     // so all null should be treated equivalently to autorange: true with any range
                     var pre0 = layoutPreGUI[head + '.range[0]'];
@@ -2478,7 +2478,7 @@ function applyUIRevisions(data, layout, oldFullData, oldFullLayout) {
         // so remove it from _preGUI for next time.
         delete layoutPreGUI[key];
 
-        if (match && match.tail.substr(0, 6) === 'range[') {
+        if (match && match.tail.slice(0, 6) === 'range[') {
             newRangeAccepted[match.head] = 1;
         }
     }

src/plot_api/plot_template.js

@@ -232,7 +232,7 @@ function arrayDefaultKey(name) {
     if(name.charAt(lastChar) !== 's') {
         Lib.warn('bad argument to arrayDefaultKey: ' + name);
     }
-    return name.substr(0, name.length - 1) + 'defaults';
+    return name.slice(0, -1) + 'defaults';
 }
 exports.arrayDefaultKey = arrayDefaultKey;
 

src/plot_api/validate.js

@@ -377,7 +377,7 @@ function convertPathToAttributeString(path) {
         var p = path[i];
 
         if(typeof p === 'number') {
-            astr = astr.substr(0, astr.length - 1) + '[' + p + ']';
+            astr = astr.slice(0, -1) + '[' + p + ']';
         } else {
             astr += p;
         }