diff --git a/draftlogs/7662_change.md b/draftlogs/7662_change.md
new file mode 100644
index 00000000000..9a6e86286c2
--- /dev/null
+++ b/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!
diff --git a/src/components/calendars/index.js b/src/components/calendars/index.js
index 7cf4e9a550c..027622dcf6c 100644
--- a/src/components/calendars/index.js
+++ b/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;
         }
     }
diff --git a/src/components/color/index.js b/src/components/color/index.js
index 50eccc4a73e..59f8932e3fe 100644
--- a/src/components/color/index.js
+++ b/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;
diff --git a/src/components/colorbar/draw.js b/src/components/colorbar/draw.js
index 4ea2a8ae8cf..3fe5a5e9ce3 100644
--- a/src/components/colorbar/draw.js
+++ b/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();
 
diff --git a/src/components/rangeslider/defaults.js b/src/components/rangeslider/defaults.js
index 6ad5409dffd..a2efeae718d 100644
--- a/src/components/rangeslider/defaults.js
+++ b/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++) {
diff --git a/src/components/shapes/calc_autorange.js b/src/components/shapes/calc_autorange.js
index 17c6ce23a2f..3ec53b46dc7 100644
--- a/src/components/shapes/calc_autorange.js
+++ b/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]);
diff --git a/src/components/shapes/draw.js b/src/components/shapes/draw.js
index 8f97ee23043..860db42a4ff 100644
--- a/src/components/shapes/draw.js
+++ b/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);
diff --git a/src/components/shapes/helpers.js b/src/components/shapes/helpers.js
index ad22a48df8c..a45c96a861f 100644
--- a/src/components/shapes/helpers.js
+++ b/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);
diff --git a/src/lib/coerce.js b/src/lib/coerce.js
index 9fa59255bc1..aaafea63956 100644
--- a/src/lib/coerce.js
+++ b/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;
             }
diff --git a/src/lib/dates.js b/src/lib/dates.js
index 83d619b6b8c..79066b84b1f 100644
--- a/src/lib/dates.js
+++ b/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(/[\.]$/, '');
         }
diff --git a/src/lib/index.js b/src/lib/index.js
index 90d38b5fde5..d898a526140 100644
--- a/src/lib/index.js
+++ b/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) {
diff --git a/src/lib/nested_property.js b/src/lib/nested_property.js
index 235405c582f..b1ecf893d3a 100644
--- a/src/lib/nested_property.js
+++ b/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++) {
diff --git a/src/lib/override_cursor.js b/src/lib/override_cursor.js
index d3f3730c9ce..2801dba5991 100644
--- a/src/lib/override_cursor.js
+++ b/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);
                 }
             }
diff --git a/src/lib/preserve_drawing_buffer.js b/src/lib/preserve_drawing_buffer.js
index e6cd3f5d277..d56ddbc0a39 100644
--- a/src/lib/preserve_drawing_buffer.js
+++ b/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;
                     }
diff --git a/src/lib/svg_text_utils.js b/src/lib/svg_text_utils.js
index 2c5ddc7f1d9..0b37345312b 100644
--- a/src/lib/svg_text_utils.js
+++ b/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];
 
diff --git a/src/plot_api/container_array_match.js b/src/plot_api/container_array_match.js
index 5505bbf066e..38735f0ba60 100644
--- a/src/plot_api/container_array_match.js
+++ b/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]*)\](\.(.+))?$/);
diff --git a/src/plot_api/helpers.js b/src/plot_api/helpers.js
index 15840ad11a8..49573143eb1 100644
--- a/src/plot_api/helpers.js
+++ b/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;
                 }
diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js
index 470900c768f..fd46fdedb0f 100644
--- a/src/plot_api/plot_api.js
+++ b/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;
         }
     }
diff --git a/src/plot_api/plot_template.js b/src/plot_api/plot_template.js
index 8dd68d01e66..b87a962a085 100644
--- a/src/plot_api/plot_template.js
+++ b/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;
 
diff --git a/src/plot_api/validate.js b/src/plot_api/validate.js
index 8119eb4a627..36b25966d0f 100644
--- a/src/plot_api/validate.js
+++ b/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;
         }
diff --git a/src/plots/cartesian/axes.js b/src/plots/cartesian/axes.js
index bb0cead5689..2833576301b 100644
--- a/src/plots/cartesian/axes.js
+++ b/src/plots/cartesian/axes.js
@@ -526,7 +526,7 @@ function autoShiftMonthBins(binStart, data, dtick, dataMin, calendar) {
     var threshold = 0.8;
 
     if(stats.exactDays > threshold) {
-        var numMonths = Number(dtick.substr(1));
+        var numMonths = Number(dtick.slice(1));
 
         if((stats.exactYears > threshold) && (numMonths % 12 === 0)) {
             // The exact middle of a non-leap-year is 1.5 days into July
@@ -1528,9 +1528,9 @@ function autoTickRound(ax) {
 
         if(String(dtick).charAt(0) === 'M') {
             // any tick0 more specific than a year: alway show the full date
-            if(tick0len > 10 || tick0str.substr(5) !== '01-01') ax._tickround = 'd';
+            if(tick0len > 10 || tick0str.slice(5) !== '01-01') ax._tickround = 'd';
             // show the month unless ticks are full multiples of a year
-            else ax._tickround = (+(dtick.substr(1)) % 12 === 0) ? 'y' : 'm';
+            else ax._tickround = (+(dtick.slice(1)) % 12 === 0) ? 'y' : 'm';
         } else if((dtick >= ONEDAY && tick0len <= 10) || (dtick >= ONEDAY * 15)) ax._tickround = 'd';
         else if((dtick >= ONEMIN && tick0len <= 16) || (dtick >= ONEHOUR)) ax._tickround = 'M';
         else if((dtick >= ONESEC && tick0len <= 19) || (dtick >= ONEMIN)) ax._tickround = 'S';
@@ -1549,7 +1549,7 @@ function autoTickRound(ax) {
     } else if(isNumeric(dtick) || dtick.charAt(0) === 'L') {
         // linear or log (except D1, D2)
         var rng = ax.range.map(ax.r2d || Number);
-        if(!isNumeric(dtick)) dtick = Number(dtick.substr(1));
+        if(!isNumeric(dtick)) dtick = Number(dtick.slice(1));
         // 2 digits past largest digit of dtick
         ax._tickround = 2 - Math.floor(Math.log(dtick) / Math.LN10 + 0.01);
 
@@ -1582,7 +1582,7 @@ axes.tickIncrement = function(x, dtick, axrev, calendar) {
 
     // everything else is a string, one character plus a number
     var tType = dtick.charAt(0);
-    var dtSigned = axSign * Number(dtick.substr(1));
+    var dtSigned = axSign * Number(dtick.slice(1));
 
     // Dates: months (or years - see Lib.incrementMonth)
     if(tType === 'M') return Lib.incrementMonth(x, dtSigned, calendar);
@@ -1627,7 +1627,7 @@ axes.tickFirst = function(ax, opts) {
     }
 
     var tType = dtick.charAt(0);
-    var dtNum = Number(dtick.substr(1));
+    var dtNum = Number(dtick.slice(1));
 
     // Dates: months (or years)
     if(tType === 'M') {
@@ -1825,8 +1825,8 @@ function formatDate(ax, out, hover, extraPrecision) {
 
     var splitIndex = dateStr.indexOf('\n');
     if(splitIndex !== -1) {
-        headStr = dateStr.substr(splitIndex + 1);
-        dateStr = dateStr.substr(0, splitIndex);
+        headStr = dateStr.slice(splitIndex + 1);
+        dateStr = dateStr.slice(0, splitIndex);
     }
 
     if(extraPrecision) {
@@ -2163,12 +2163,12 @@ function numFormat(v, ax, fmtoverride, hover) {
         if(tickRound === 0) v = String(Math.floor(v));
         else if(tickRound < 0) {
             v = String(Math.round(v));
-            v = v.substr(0, v.length + tickRound);
+            v = v.slice(0, Math.max(0, v.length + tickRound));
             for(var i = tickRound; i < 0; i++) v += '0';
         } else {
             v = String(v);
             var dp = v.indexOf('.') + 1;
-            if(dp) v = v.substr(0, dp + tickRound).replace(/\.?0+$/, '');
+            if(dp) v = v.slice(0, dp + tickRound).replace(/\.?0+$/, '');
         }
         // insert appropriate decimal point and thousands separator
         v = Lib.numSeparate(v, ax._separators, separatethousands);
@@ -2289,8 +2289,8 @@ axes.getSubplots = function(gd, ax) {
     var out = ax ? axes.findSubplotsWithAxis(allSubplots, ax) : allSubplots;
 
     out.sort(function(a, b) {
-        var aParts = a.substr(1).split('y');
-        var bParts = b.substr(1).split('y');
+        var aParts = a.slice(1).split('y');
+        var bParts = b.slice(1).split('y');
 
         if(aParts[0] === bParts[0]) return +aParts[1] - +bParts[1];
         return +aParts[0] - +bParts[0];
diff --git a/src/plots/cartesian/axis_defaults.js b/src/plots/cartesian/axis_defaults.js
index 1a240997360..df859c7f59a 100644
--- a/src/plots/cartesian/axis_defaults.js
+++ b/src/plots/cartesian/axis_defaults.js
@@ -337,6 +337,6 @@ var dayStrToNum = {
 function indexOfDay(v) {
     if(typeof v !== 'string') return;
     return dayStrToNum[
-        v.substr(0, 3).toLowerCase()
+        v.slice(0, 3).toLowerCase()
     ];
 }
diff --git a/src/plots/cartesian/axis_ids.js b/src/plots/cartesian/axis_ids.js
index efb6fcf7147..503315d107a 100644
--- a/src/plots/cartesian/axis_ids.js
+++ b/src/plots/cartesian/axis_ids.js
@@ -10,14 +10,14 @@ var constants = require('./constants');
 // completely in favor of just 'x' if it weren't ingrained in the API etc.
 exports.id2name = function id2name(id) {
     if(typeof id !== 'string' || !id.match(constants.AX_ID_PATTERN)) return;
-    var axNum = id.split(' ')[0].substr(1);
+    var axNum = id.split(' ')[0].slice(1);
     if(axNum === '1') axNum = '';
     return id.charAt(0) + 'axis' + axNum;
 };
 
 exports.name2id = function name2id(name) {
     if(!name.match(constants.AX_NAME_PATTERN)) return;
-    var axNum = name.substr(5);
+    var axNum = name.slice(5);
     if(axNum === '1') axNum = '';
     return name.charAt(0) + axNum;
 };
@@ -33,7 +33,7 @@ exports.cleanId = function cleanId(id, axLetter, domainId) {
     if(typeof id !== 'string' || !id.match(constants.AX_ID_PATTERN)) return;
     if(axLetter && id.charAt(0) !== axLetter) return;
     if(domainTest && (!domainId)) return;
-    var axNum = id.split(' ')[0].substr(1).replace(/^0+/, '');
+    var axNum = id.split(' ')[0].slice(1).replace(/^0+/, '');
     if(axNum === '1') axNum = '';
     return id.charAt(0) + axNum + (domainTest && domainId ? ' domain' : '');
 };
@@ -49,7 +49,7 @@ exports.list = function(gd, axLetter, only2d) {
 
     for(i = 0; i < idList.length; i++) {
         var idi = idList[i];
-        out[i] = fullLayout[idi.charAt(0) + 'axis' + idi.substr(1)];
+        out[i] = fullLayout[idi.charAt(0) + 'axis' + idi.slice(1)];
     }
 
     if(!only2d) {
@@ -97,7 +97,7 @@ exports.getFromTrace = function(gd, fullTrace, type) {
 
     if(Registry.traceIs(fullTrace, 'gl3d')) {
         var scene = fullTrace.scene;
-        if(scene.substr(0, 5) === 'scene') {
+        if(scene.slice(0, 5) === 'scene') {
             ax = fullLayout[scene][type + 'axis'];
         }
     } else {
@@ -112,7 +112,7 @@ exports.idSort = function(id1, id2) {
     var letter1 = id1.charAt(0);
     var letter2 = id2.charAt(0);
     if(letter1 !== letter2) return letter1 > letter2 ? 1 : -1;
-    return +(id1.substr(1) || 1) - +(id2.substr(1) || 1);
+    return +(id1.slice(1) || 1) - +(id2.slice(1) || 1);
 };
 
 /*
diff --git a/src/plots/cartesian/clean_ticks.js b/src/plots/cartesian/clean_ticks.js
index edf4284aa58..50df6a47b9d 100644
--- a/src/plots/cartesian/clean_ticks.js
+++ b/src/plots/cartesian/clean_ticks.js
@@ -40,7 +40,7 @@ exports.dtick = function(dtick, axType) {
     }
 
     var prefix = dtick.charAt(0);
-    var dtickNum = dtick.substr(1);
+    var dtickNum = dtick.slice(1);
     dtickNum = isNumeric(dtickNum) ? Number(dtickNum) : 0;
 
     if((dtickNum <= 0) || !(
diff --git a/src/plots/cartesian/constraints.js b/src/plots/cartesian/constraints.js
index 8adfa356b94..2dd1e665df1 100644
--- a/src/plots/cartesian/constraints.js
+++ b/src/plots/cartesian/constraints.js
@@ -386,13 +386,13 @@ function multiplyScales(a, b) {
     if(typeof a === 'string') {
         aPrefix = a.match(/^[xy]*/)[0];
         aLen = aPrefix.length;
-        a = +a.substr(aLen);
+        a = +a.slice(aLen);
     }
 
     if(typeof b === 'string') {
         bPrefix = b.match(/^[xy]*/)[0];
         bLen = bPrefix.length;
-        b = +b.substr(bLen);
+        b = +b.slice(bLen);
     }
 
     var c = a * b;
@@ -413,7 +413,7 @@ function multiplyScales(a, b) {
     }
 
     // partial cancelation of prefixes
-    return (aLen > bLen ? aPrefix.substr(bLen) : bPrefix.substr(aLen)) + c;
+    return (aLen > bLen ? aPrefix.slice(bLen) : bPrefix.slice(aLen)) + c;
 }
 
 function finalRatios(group, fullLayout) {
@@ -428,7 +428,7 @@ function finalRatios(group, fullLayout) {
         if(typeof val === 'string') {
             var prefix = val.match(/^[xy]*/)[0];
             var pLen = prefix.length;
-            val = +val.substr(pLen);
+            val = +val.slice(pLen);
             var mult = prefix.charAt(0) === 'y' ? yRatio : (1 / yRatio);
             for(var j = 0; j < pLen; j++) {
                 val *= mult;
diff --git a/src/plots/cartesian/index.js b/src/plots/cartesian/index.js
index 71eeb5b1a9e..e55a90b39e2 100644
--- a/src/plots/cartesian/index.js
+++ b/src/plots/cartesian/index.js
@@ -98,10 +98,10 @@ exports.finalizeSubplots = function(layoutIn, layoutOut) {
             if(constants.attrRegex.test(ki)) {
                 var axLetter = ki.charAt(0);
                 if(axLetter === 'x') {
-                    if(!xi || (+ki.substr(5) < +xi.substr(5))) {
+                    if(!xi || (+ki.slice(5) < +xi.slice(5))) {
                         xi = ki;
                     }
-                } else if(!yi || (+ki.substr(5) < +yi.substr(5))) {
+                } else if(!yi || (+ki.slice(5) < +yi.slice(5))) {
                     yi = ki;
                 }
             }
diff --git a/src/plots/geo/layout_defaults.js b/src/plots/geo/layout_defaults.js
index a5d64e2e9f8..cfb73a3c266 100644
--- a/src/plots/geo/layout_defaults.js
+++ b/src/plots/geo/layout_defaults.js
@@ -73,7 +73,7 @@ function handleGeoDefaults(geoLayoutIn, geoLayoutOut, coerce, opts) {
             var dfltSpans = constants[axisName + 'Span'];
             var hSpan = (dfltSpans[projType] || dfltSpans['*']) / 2;
             var rot = coerce(
-                'projection.rotation.' + axisName.substr(0, 3),
+                'projection.rotation.' + axisName.slice(0, 3),
                 scopeParams.projRotate[i]
             );
             rangeDflt = [rot - hSpan, rot + hSpan];
diff --git a/src/plots/gl3d/index.js b/src/plots/gl3d/index.js
index 089e3db9551..94116ef2c4d 100644
--- a/src/plots/gl3d/index.js
+++ b/src/plots/gl3d/index.js
@@ -132,7 +132,7 @@ exports.toSVG = function(gd) {
 exports.cleanId = function cleanId(id) {
     if(!id.match(/^scene[0-9]*$/)) return;
 
-    var sceneNum = id.substr(5);
+    var sceneNum = id.slice(5);
     if(sceneNum === '1') sceneNum = '';
 
     return SCENE + sceneNum;
diff --git a/src/plots/plots.js b/src/plots/plots.js
index 6550eb353a8..2ac2cb81461 100644
--- a/src/plots/plots.js
+++ b/src/plots/plots.js
@@ -1450,7 +1450,7 @@ plots.supplyLayoutGlobalDefaults = function(layoutIn, layoutOut, formatObj) {
 function getComputedSize(attr) {
     return (
         (typeof attr === 'string') &&
-        (attr.substr(attr.length - 2) === 'px') &&
+        (attr.slice(-2) === 'px') &&
         parseFloat(attr)
     );
 }
@@ -2099,7 +2099,7 @@ plots.graphJson = function(gd, dataonly, mode, output, useDefaults, includeConfi
                 // look for src/data matches and remove the appropriate one
                 if(mode === 'keepdata') {
                     // keepdata: remove all ...src tags
-                    if(v.substr(v.length - 3) === 'src') {
+                    if(v.slice(-3) === 'src') {
                         return;
                     }
                 } else if(mode === 'keepstream') {
diff --git a/src/plots/ternary/ternary.js b/src/plots/ternary/ternary.js
index 9a6fbdd3d00..7852af5acd0 100644
--- a/src/plots/ternary/ternary.js
+++ b/src/plots/ternary/ternary.js
@@ -356,7 +356,7 @@ proto.adjustLayout = function(ternaryLayout, graphSize) {
 proto.drawAxes = function(doTitles) {
     var _this = this;
     var gd = _this.graphDiv;
-    var titlesuffix = _this.id.substr(7) + 'title';
+    var titlesuffix = _this.id.slice(7) + 'title';
     var layers = _this.layers;
     var aaxis = _this.aaxis;
     var baxis = _this.baxis;
diff --git a/src/traces/histogram/bin_label_vals.js b/src/traces/histogram/bin_label_vals.js
index 6f0104285ee..3a1429fc088 100644
--- a/src/traces/histogram/bin_label_vals.js
+++ b/src/traces/histogram/bin_label_vals.js
@@ -61,7 +61,7 @@ module.exports = function getBinSpanLabelRound(leftGap, rightGap, binEdges, pa,
         return function(v, isRightEdge) {
             var dateStr = pa.c2d(v, oneYear, calendar);
             var dashPos = dateStr.indexOf('-', dashExclude);
-            if(dashPos > 0) dateStr = dateStr.substr(0, dashPos);
+            if(dashPos > 0) dateStr = dateStr.slice(0, dashPos);
             var roundedV = pa.d2c(dateStr, 0, calendar);
 
             if(roundedV < v) {
diff --git a/src/traces/parcoords/lines.js b/src/traces/parcoords/lines.js
index 69a2a6a8552..d6ddb6390cc 100644
--- a/src/traces/parcoords/lines.js
+++ b/src/traces/parcoords/lines.js
@@ -272,7 +272,7 @@ function makeVecAttr(vecIndex, sampleCount, points) {
 
 function pad2(num) {
     var s = '0' + num;
-    return s.substr(s.length - 2);
+    return s.slice(-2);
 }
 
 function getAttrName(i) {
diff --git a/src/traces/scatter/link_traces.js b/src/traces/scatter/link_traces.js
index 31c5cc69eb1..ebe62519981 100644
--- a/src/traces/scatter/link_traces.js
+++ b/src/traces/scatter/link_traces.js
@@ -65,9 +65,9 @@ module.exports = function linkTraces(gd, plotinfo, cdscatter) {
             }
 
             trace._ownfill = (trace.fill && (
-                trace.fill.substr(0, 6) === 'tozero' ||
+                trace.fill.slice(0, 6) === 'tozero' ||
                 trace.fill === 'toself' ||
-                (trace.fill.substr(0, 2) === 'to' && !trace._prevtrace)
+                (trace.fill.slice(0, 2) === 'to' && !trace._prevtrace)
             ));
 
             prevtraces[group] = trace;
diff --git a/src/traces/scatter/plot.js b/src/traces/scatter/plot.js
index 3ab3481b7b5..f22a75fbfd5 100644
--- a/src/traces/scatter/plot.js
+++ b/src/traces/scatter/plot.js
@@ -282,8 +282,8 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition
                     revpath = thisrevpath;
                 } else if(ownFillDir) {
                     // for fills with fill direction: ignore gaps
-                    fullpath += 'L' + thispath.substr(1);
-                    revpath = thisrevpath + ('L' + revpath.substr(1));
+                    fullpath += 'L' + thispath.slice(1);
+                    revpath = thisrevpath + ('L' + revpath.slice(1));
                 } else {
                     fullpath += 'Z' + thispath;
                     revpath = thisrevpath + 'Z' + revpath;
@@ -389,7 +389,7 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition
                     // For the sake of animations, wrap the points around so that
                     // the points on the axes are the first two points. Otherwise
                     // animations get a little crazy if the number of points changes.
-                    transition(ownFillEl3).attr('d', 'M' + pt1 + 'L' + pt0 + 'L' + fullpath.substr(1))
+                    transition(ownFillEl3).attr('d', 'M' + pt1 + 'L' + pt0 + 'L' + fullpath.slice(1))
                         .call(Drawing.singleFillStyle, gd);
 
                     // create hover polygons that extend to the axis as well.
@@ -406,7 +406,7 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition
             trace._polygons = thisPolygons;
             trace._fillElement = ownFillEl3;
         } else if(tonext) {
-            if(trace.fill.substr(0, 6) === 'tonext' && fullpath && prevRevpath) {
+            if(trace.fill.slice(0, 6) === 'tonext' && fullpath && prevRevpath) {
                 // fill to next: full trace path, plus the previous path reversed
                 if(trace.fill === 'tonext') {
                     // tonext: for use by concentric shapes, like manually constructed
@@ -428,7 +428,7 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition
                     // y/x, but if they *aren't*, we should ideally do more complicated
                     // things depending on whether the new endpoint projects onto the
                     // existing curve or off the end of it
-                    transition(tonext).attr('d', fullpath + 'L' + prevRevpath.substr(1) + 'Z')
+                    transition(tonext).attr('d', fullpath + 'L' + prevRevpath.slice(1) + 'Z')
                         .call(Drawing.singleFillStyle, gd);
 
                     // create hover polygons that extend to the previous trace.
diff --git a/src/traces/violin/plot.js b/src/traces/violin/plot.js
index da5a8a837b7..f62c42fad1d 100644
--- a/src/traces/violin/plot.js
+++ b/src/traces/violin/plot.js
@@ -96,7 +96,7 @@ module.exports = function plot(gd, plotinfo, cdViolins, violinLayer) {
             }
 
             if(hasBothSides) {
-                path = pathPos + 'L' + pathNeg.substr(1) + 'Z';
+                path = pathPos + 'L' + pathNeg.slice(1) + 'Z';
             } else {
                 var startPt = [posCenterPx, valAxis.c2p(density[0].t)];
                 var endPt = [posCenterPx, valAxis.c2p(density[len - 1].t)];
@@ -107,9 +107,9 @@ module.exports = function plot(gd, plotinfo, cdViolins, violinLayer) {
                 }
 
                 if(hasPositiveSide) {
-                    path = 'M' + startPt + 'L' + pathPos.substr(1) + 'L' + endPt;
+                    path = 'M' + startPt + 'L' + pathPos.slice(1) + 'L' + endPt;
                 } else {
-                    path = 'M' + endPt + 'L' + pathNeg.substr(1) + 'L' + startPt;
+                    path = 'M' + endPt + 'L' + pathNeg.slice(1) + 'L' + startPt;
                 }
             }
             pathSel.attr('d', path);
diff --git a/test/jasmine/assets/custom_assertions.js b/test/jasmine/assets/custom_assertions.js
index d4df99b157d..9dc24ecbe75 100644
--- a/test/jasmine/assets/custom_assertions.js
+++ b/test/jasmine/assets/custom_assertions.js
@@ -226,7 +226,7 @@ exports.assertClip = function(sel, isClipped, size, msg) {
         var clipPath = d3Select(this).attr('clip-path');
 
         if(isClipped) {
-            expect(String(clipPath).substr(0, 4))
+            expect(String(clipPath).slice(0, 4))
                 .toBe('url(', msg + ' clip path ' + '(item ' + i + ')');
         } else {
             expect(clipPath)
diff --git a/test/jasmine/assets/domain_ref_components.js b/test/jasmine/assets/domain_ref_components.js
index abb7515664b..66f8c44f13a 100644
--- a/test/jasmine/assets/domain_ref_components.js
+++ b/test/jasmine/assets/domain_ref_components.js
@@ -586,8 +586,8 @@ function testShapeCombo(combo, assert, gd) {
     var xaroPos = combo[3];
     var yaroPos = combo[4];
     var shapeType = combo[5];
-    var xAxNum = axispair[0].substr(1);
-    var yAxNum = axispair[1].substr(1);
+    var xAxNum = axispair[0].slice(1);
+    var yAxNum = axispair[1].slice(1);
     return Plotly.newPlot(gd, Lib.extendDeep({}, testMock))
         .then(function(gd) {
             return shapeTest(gd,
diff --git a/test/jasmine/assets/get_bbox.js b/test/jasmine/assets/get_bbox.js
index 503f210eb6b..873b54682b3 100644
--- a/test/jasmine/assets/get_bbox.js
+++ b/test/jasmine/assets/get_bbox.js
@@ -15,7 +15,7 @@ module.exports = function getBBox(element) {
     if(!clipPathAttr) return elementBBox;
 
     // only supports 'url(#<id>)' at the moment
-    var clipPathId = clipPathAttr.substring(5, clipPathAttr.length - 1);
+    var clipPathId = clipPathAttr.slice(5, clipPathAttr.length - 1);
     var clipBBox = getClipBBox(clipPathId);
 
     return minBBox(elementBBox, clipBBox);
diff --git a/test/jasmine/bundle_tests/no_webgl_test.js b/test/jasmine/bundle_tests/no_webgl_test.js
index 88d599b4142..7b1e788cf68 100644
--- a/test/jasmine/bundle_tests/no_webgl_test.js
+++ b/test/jasmine/bundle_tests/no_webgl_test.js
@@ -19,7 +19,7 @@ describe('Plotly w/o WebGL support:', function() {
     function checkNoWebGLMsg(visible) {
         var msg = gd.querySelector('div.no-webgl > p');
         if(visible) {
-            expect(msg.innerHTML.substr(0, 22)).toBe('WebGL is not supported');
+            expect(msg.innerHTML.slice(0, 22)).toBe('WebGL is not supported');
         } else {
             expect(msg).toBe(null);
         }
diff --git a/test/jasmine/bundle_tests/plotschema_test.js b/test/jasmine/bundle_tests/plotschema_test.js
index 7a89f628bce..0f26ee7a80f 100644
--- a/test/jasmine/bundle_tests/plotschema_test.js
+++ b/test/jasmine/bundle_tests/plotschema_test.js
@@ -172,7 +172,7 @@ describe('plot schema', function() {
             );
 
             var name = np.parts[np.parts.length - 1];
-            var itemName = name.substr(0, name.length - 1);
+            var itemName = name.slice(0, name.length - 1);
 
             var itemsObj = np.get().items;
             var itemObj = itemsObj[itemName];
diff --git a/test/jasmine/tests/annotations_test.js b/test/jasmine/tests/annotations_test.js
index 7abda62e48a..658fcdd78de 100644
--- a/test/jasmine/tests/annotations_test.js
+++ b/test/jasmine/tests/annotations_test.js
@@ -1289,7 +1289,7 @@ describe('annotation effects', function() {
             // AJ loosened this test - expected '2017-02-02 06:36:46.8112'
             // but when I run it I get '2017-02-02 06:28:39.9586'.
             // must be different fonts altering autoranging
-            expect(gd._fullLayout.annotations[0].y.substr(0, 10)).toBe('2017-02-02');
+            expect(gd._fullLayout.annotations[0].y.slice(0, 10)).toBe('2017-02-02');
         })
         .then(done, done.fail);
     });
diff --git a/test/jasmine/tests/axes_test.js b/test/jasmine/tests/axes_test.js
index 6314d97a1b0..4d85a14fc37 100644
--- a/test/jasmine/tests/axes_test.js
+++ b/test/jasmine/tests/axes_test.js
@@ -833,7 +833,7 @@ describe('Test axes', function() {
         it('breaks scaleanchor loops and drops conflicting ratios', function() {
             var warnings = [];
             spyOn(Lib, 'warn').and.callFake(function(msg) {
-                warnings.push(msg.substr(0, msg.indexOf(' to avoid')));
+                warnings.push(msg.slice(0, msg.indexOf(' to avoid')));
             });
 
             layoutIn = {
@@ -868,7 +868,7 @@ describe('Test axes', function() {
         it('silently drops invalid scaleanchor values', function() {
             var warnings = [];
             spyOn(Lib, 'warn').and.callFake(function(msg) {
-                warnings.push(msg.substr(0, msg.indexOf(' to avoid')));
+                warnings.push(msg.slice(0, msg.indexOf(' to avoid')));
             });
 
             layoutIn = {
diff --git a/test/jasmine/tests/bar_test.js b/test/jasmine/tests/bar_test.js
index 10e6413659b..107021ba1cd 100644
--- a/test/jasmine/tests/bar_test.js
+++ b/test/jasmine/tests/bar_test.js
@@ -2170,7 +2170,7 @@ describe('A bar plot', function() {
 
     function getArea(path) {
         var pos = path
-            .substr(1, path.length - 2)
+            .slice(1, path.length - 1)
             .replace('V', ',')
             .replace('H', ',')
             .replace('V', ',')
@@ -3258,7 +3258,7 @@ describe('bar uniformtext', function() {
                 if(pos0 !== -1) {
                     pos0 += 'scale('.length;
                     var pos1 = transform.indexOf(')', pos0);
-                    scale = +(transform.substring(pos0, pos1));
+                    scale = +(transform.slice(pos0, pos1));
                 }
 
                 expect(opts.scales[i]).toBeCloseTo(scale, 1, 'scale for element ' + i, msg);
diff --git a/test/jasmine/tests/funnel_test.js b/test/jasmine/tests/funnel_test.js
index 2c5dbf03dae..0506aba9da3 100644
--- a/test/jasmine/tests/funnel_test.js
+++ b/test/jasmine/tests/funnel_test.js
@@ -1664,7 +1664,7 @@ describe('funnel uniformtext', function() {
                 if(pos0 !== -1) {
                     pos0 += 'scale('.length;
                     var pos1 = transform.indexOf(')', pos0);
-                    scale = +(transform.substring(pos0, pos1));
+                    scale = +(transform.slice(pos0, pos1));
                 }
 
                 expect(opts.scales[i]).toBeCloseTo(scale, 1, 'scale for element ' + i, msg);
diff --git a/test/jasmine/tests/funnelarea_test.js b/test/jasmine/tests/funnelarea_test.js
index 078a29f8f9b..f2410308f57 100644
--- a/test/jasmine/tests/funnelarea_test.js
+++ b/test/jasmine/tests/funnelarea_test.js
@@ -1737,7 +1737,7 @@ describe('funnelarea uniformtext', function() {
                 if(pos0 !== -1) {
                     pos0 += 'scale('.length;
                     var pos1 = transform.indexOf(')', pos0);
-                    scale = +(transform.substring(pos0, pos1));
+                    scale = +(transform.slice(pos0, pos1));
                 }
 
                 expect(opts.scales[i]).toBeCloseTo(scale, 1, 'scale for element ' + i, msg);
diff --git a/test/jasmine/tests/lib_date_test.js b/test/jasmine/tests/lib_date_test.js
index 186afd033a2..3b52cb9ff1d 100644
--- a/test/jasmine/tests/lib_date_test.js
+++ b/test/jasmine/tests/lib_date_test.js
@@ -261,7 +261,7 @@ describe('dates', function() {
             for(var i = -1; i <= 1; i += 0.001) {
                 var tenths = Math.round(i * 10);
                 var base = i < -0.05 ? '1969-12-31 23:59:59.99' : '1970-01-01 00:00:00.00';
-                var expected = (base + String(tenths + 200).substr(1))
+                var expected = (base + String(tenths + 200).slice(1))
                     .replace(/0+$/, '')
                     .replace(/ 00:00:00[\.]$/, '');
                 expect(Lib.ms2DateTime(i)).toBe(expected, i);
diff --git a/test/jasmine/tests/lib_number_format_test.js b/test/jasmine/tests/lib_number_format_test.js
index 7a8c1f8c06c..21ddad84809 100644
--- a/test/jasmine/tests/lib_number_format_test.js
+++ b/test/jasmine/tests/lib_number_format_test.js
@@ -115,7 +115,7 @@ describe('number format', function() {
 
             if(format.indexOf('(') === 0) {
                 posExp = exp.replace('+', ' ');
-                negExp = exp.replace('+', '(').substring(1) + ')';
+                negExp = exp.replace('+', '(').slice(1) + ')';
             } else if(format.indexOf('+') === 0) {
                 negExp = exp.replace('+', '-');
             } else if(format.indexOf('-') === 0) {
diff --git a/test/jasmine/tests/modebar_test.js b/test/jasmine/tests/modebar_test.js
index 4d14c87d700..ede3177f289 100644
--- a/test/jasmine/tests/modebar_test.js
+++ b/test/jasmine/tests/modebar_test.js
@@ -1040,7 +1040,7 @@ describe('ModeBar', function() {
             var actual = ax.range;
 
             if(ax.type === 'date') {
-                var truncate = function(v) { return v.substr(0, 10); };
+                var truncate = function(v) { return v.slice(0, 10); };
                 expect(actual.map(truncate)).toEqual(expected.map(truncate), axName);
             } else {
                 expect(actual).toBeCloseToArray(expected, PRECISION, axName);
diff --git a/test/jasmine/tests/pie_test.js b/test/jasmine/tests/pie_test.js
index d1820868f82..5aad071dc2e 100644
--- a/test/jasmine/tests/pie_test.js
+++ b/test/jasmine/tests/pie_test.js
@@ -1779,7 +1779,7 @@ describe('pie inside text orientation', function() {
                 if(pos0 !== -1) {
                     pos0 += 'rotate('.length;
                     var pos1 = transform.indexOf(')', pos0);
-                    rotate = +(transform.substring(pos0, pos1));
+                    rotate = +(transform.slice(pos0, pos1));
                 }
 
                 expect(opts.rotations[i]).toBeCloseTo(rotate, -1, 'rotation for element ' + i, msg);
@@ -1879,7 +1879,7 @@ describe('pie uniformtext', function() {
                 if(pos0 !== -1) {
                     pos0 += 'scale('.length;
                     var pos1 = transform.indexOf(')', pos0);
-                    scale = +(transform.substring(pos0, pos1));
+                    scale = +(transform.slice(pos0, pos1));
                 }
 
                 expect(opts.scales[i]).toBeCloseTo(scale, 1, 'scale for element ' + i, msg);
diff --git a/test/jasmine/tests/plot_interact_test.js b/test/jasmine/tests/plot_interact_test.js
index e091148b807..5a40eab22c5 100644
--- a/test/jasmine/tests/plot_interact_test.js
+++ b/test/jasmine/tests/plot_interact_test.js
@@ -545,8 +545,8 @@ describe('plot svg clip paths', function() {
             d3SelectAll('[clip-path]').each(function() {
                 var cp = d3Select(this).attr('clip-path');
 
-                expect(cp.substring(0, 5)).toEqual('url(#');
-                expect(cp.substring(cp.length - 1)).toEqual(')');
+                expect(cp.slice(0, 5)).toEqual('url(#');
+                expect(cp.slice(cp.length - 1)).toEqual(')');
             });
         })
         .then(done, done.fail);
@@ -568,8 +568,8 @@ describe('plot svg clip paths', function() {
             d3SelectAll('[clip-path]').each(function() {
                 var cp = d3Select(this).attr('clip-path');
 
-                expect(cp.substring(0, 6 + href.length)).toEqual('url(\'' + href + '#');
-                expect(cp.substring(cp.length - 2)).toEqual('\')');
+                expect(cp.slice(0, 6 + href.length)).toEqual('url(\'' + href + '#');
+                expect(cp.slice(cp.length - 2)).toEqual('\')');
             });
 
             base.remove();
diff --git a/test/jasmine/tests/shapes_test.js b/test/jasmine/tests/shapes_test.js
index d26a2529887..96175e497bf 100644
--- a/test/jasmine/tests/shapes_test.js
+++ b/test/jasmine/tests/shapes_test.js
@@ -1642,7 +1642,7 @@ describe('Test shapes', function() {
             var xParams = constants.paramIsX[segmentType];
             var yParams = constants.paramIsY[segmentType];
             var nParams = constants.numParams[segmentType];
-            var params = segment.substr(1).match(constants.paramRE);
+            var params = segment.slice(1).match(constants.paramRE);
 
             if(params) {
                 params.forEach(function(param) {
diff --git a/test/jasmine/tests/snapshot_test.js b/test/jasmine/tests/snapshot_test.js
index 2dda2ebe6a2..5eafa16e0a0 100644
--- a/test/jasmine/tests/snapshot_test.js
+++ b/test/jasmine/tests/snapshot_test.js
@@ -252,7 +252,7 @@ describe('Plotly.Snapshot', function() {
         describe('should handle quoted style properties', function() {
             function checkURL(actual, msg) {
                 // which is enough tot check that toSVG did its job right
-                expect((actual || '').substr(0, 6)).toBe('url(\"#', msg);
+                expect((actual || '').slice(0, 6)).toBe('url(\"#', msg);
             }
 
             it('- marker-gradient case', function(done) {
diff --git a/test/jasmine/tests/sunburst_test.js b/test/jasmine/tests/sunburst_test.js
index 76d4e3826ad..09ae8bf4ad6 100644
--- a/test/jasmine/tests/sunburst_test.js
+++ b/test/jasmine/tests/sunburst_test.js
@@ -2745,7 +2745,7 @@ describe('sunburst inside text orientation', function () {
                 if (pos0 !== -1) {
                     pos0 += 'rotate('.length;
                     var pos1 = transform.indexOf(')', pos0);
-                    rotate = +transform.substring(pos0, pos1);
+                    rotate = +transform.slice(pos0, pos1);
                 }
 
                 expect(opts.rotations[i]).toBeCloseTo(rotate, -1, 'rotation for element ' + i, msg);
@@ -2853,7 +2853,7 @@ describe('sunburst uniformtext', function () {
                 if (pos0 !== -1) {
                     pos0 += 'scale('.length;
                     var pos1 = transform.indexOf(')', pos0);
-                    scale = +transform.substring(pos0, pos1);
+                    scale = +transform.slice(pos0, pos1);
                 }
 
                 expect(opts.scales[i]).toBeCloseTo(scale, 1, 'scale for element ' + i, msg);
diff --git a/test/jasmine/tests/toimage_test.js b/test/jasmine/tests/toimage_test.js
index 366ae0d5884..447aa4d3f8d 100644
--- a/test/jasmine/tests/toimage_test.js
+++ b/test/jasmine/tests/toimage_test.js
@@ -247,12 +247,12 @@ describe('Plotly.toImage', function() {
             var clipPath = gSubplot.getAttribute('clip-path');
             var len = clipPath.length;
 
-            var head = clipPath.substr(0, 4);
-            var tail = clipPath.substr(len - 7, len);
+            var head = clipPath.slice(0, 4);
+            var tail = clipPath.slice(len - 7, len);
             expect(head).toBe('url(', 'subplot clipPath head');
             expect(tail).toBe('xyplot)', 'subplot clipPath tail');
 
-            var middle = clipPath.substr(4, 10);
+            var middle = clipPath.slice(4, 14);
             expect(middle.length).toBe(10, 'subplot clipPath uid length');
             expect(middle.indexOf('http://')).toBe(-1, 'no <base> URL in subplot clipPath!');
             expect(middle.indexOf('https://')).toBe(-1, 'no <base> URL in subplot clipPath!');
diff --git a/test/jasmine/tests/treemap_test.js b/test/jasmine/tests/treemap_test.js
index 5ba3d153541..bf427dc4eae 100644
--- a/test/jasmine/tests/treemap_test.js
+++ b/test/jasmine/tests/treemap_test.js
@@ -2141,7 +2141,7 @@ describe('treemap uniformtext', function () {
                 if (pos0 !== -1) {
                     pos0 += 'scale('.length;
                     var pos1 = transform.indexOf(')', pos0);
-                    scale = +transform.substring(pos0, pos1);
+                    scale = +transform.slice(pos0, pos1);
                 }
 
                 expect(opts.scales[i]).toBeCloseTo(scale, 1, 'scale for element ' + i, msg);
diff --git a/test/jasmine/tests/waterfall_test.js b/test/jasmine/tests/waterfall_test.js
index 7b5164a358e..55b1446aaaf 100644
--- a/test/jasmine/tests/waterfall_test.js
+++ b/test/jasmine/tests/waterfall_test.js
@@ -1830,7 +1830,7 @@ describe('waterfall uniformtext', function() {
                 if(pos0 !== -1) {
                     pos0 += 'scale('.length;
                     var pos1 = transform.indexOf(')', pos0);
-                    scale = +(transform.substring(pos0, pos1));
+                    scale = +(transform.slice(pos0, pos1));
                 }
 
                 expect(opts.scales[i]).toBeCloseTo(scale, 1, 'scale for element ' + i, msg);
diff --git a/test/strict-d3.js b/test/strict-d3.js
index b3705cf3ae7..de86f3670d0 100644
--- a/test/strict-d3.js
+++ b/test/strict-d3.js
@@ -71,7 +71,7 @@ function checkStyleVal(sel, key, val) {
         // test each part separately
         val.split(/[, ]/g).forEach(function(valPart) {
             var pxSplit = valPart.length - 2;
-            if(valPart.substr(pxSplit) === 'px' && !isNumeric(valPart.substr(0, pxSplit))) {
+            if(valPart.slice(pxSplit) === 'px' && !isNumeric(valPart.slice(0, pxSplit))) {
                 throw new Error('d3 selection.style called with value: ' + val);
             }
         });