extend ECMAScript by adding new keywords and syntax
I know of two plausible approaches:

One approach is to start with a lexer and parser for ECMAScript and modify them.

Another approach is to build your own preprocessor that takes as input a program with your syntax, and transforms it to EMCAScript which can be accepted by an existing interpreter (by replacing instances of |variable| with something that does fall within the normal ECMAScript syntax).  Since you haven't told us anything about the semantics of the |variable| syntax, I can't make any suggestions for a specific transformation to apply, but you might be able to work one out.