Defining chained string transform functions in Javascript

Question

Chaining Methods, also known as Cascading, refers to repeatedly calling one method after another on an object, in one continuous line of code.

Writing code like this:

str.replace("k", "R").toUpperCase().substr(0,4); 

is not just pleasurable and convenient but also succinct and intelligible. It allows us to read code like a sentence, flowing gracefully across the page. It also frees us from the monotonous, blocky structures we usually construct.

This blog talks about how to do it generally, however considering extending the String prototype will be good enough for my case, I don't know whether it is an overkill or not.

Basically I don't know enough Javascript to make the judgement call of,

• whether go with the above general way,
• or just extend the String prototype, knowing that it is generally a bad practice
• or maybe using function wrapper (or maybe it is totally irrelevant)
• I also know the following is another option, but it's kind of rigid, I.e., translated into my case, it means the string transform can only be
  replace("k", "R") then followed by toUpperCase() then followed by substr(0,4).

// https://medium.com/javascript-scene/javascript-factory-functions-with-es6-4d224591a8b1
console.log('Begin');

const withConstructor = constructor => o => {
  const proto = Object.assign({},
Object.getPrototypeOf(o),
{ constructor }
  );
  return Object.assign(Object.create(proto), o);
};

const pipe = (...fns) => x => fns.reduce((y, f) => f(y), x);
// or `import pipe from 'lodash/fp/flow';`
// Set up some functional mixins
const withFlying = o => {
  let isFlying = false;
  return {
...o,
fly () {
  isFlying = true;
  return this;
},
land () {
  isFlying = false;
  return this;
},
isFlying: () => isFlying
  }
};
const withBattery = ({ capacity }) => o => {
  let percentCharged = 100;
  return {
...o,
draw (percent) {
  const remaining = percentCharged - percent;
  percentCharged = remaining > 0 ? remaining : 0;
  return this;
},
getCharge: () => percentCharged,
get capacity () {
  return capacity
}
  };
};
const createDrone = ({ capacity = '3000mAh' }) => pipe(
  withFlying,
  withBattery({ capacity }),
  withConstructor(createDrone)
)({});
const myDrone = createDrone({ capacity: '5500mAh' });
console.log(`
  can fly:  ${ myDrone.fly().isFlying() === true }
  can land: ${ myDrone.land().isFlying() === false }
  battery capacity: ${ myDrone.capacity }
  battery status: ${ myDrone.draw(50).getCharge() }%
  battery drained: ${ myDrone.draw(75).getCharge() }%
`);
console.log(`
  constructor linked: ${ myDrone.constructor === createDrone }
`);

console.log('End');

To make it simple, I need to define my own functions like

str.transform1("k", "R").transform2().transform3(0,4); 

that do just as

str.replace("k", "R").toUpperCase().substr(0,4); 

In reality each function will be a set of complicated replace() function call, but let's make it simple for this question.

What best should I do?